html – 如何为左,右和顶部定位具有相等边距的div

发布时间:2020-08-11 整理:编程之家
编程之家收集整理的这篇文章主要介绍了html – 如何为左,右和顶部定位具有相等边距的div编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随编程之家小编过来看看吧!
我想实现一个如下所示的布局:

我对css / html唯一解决方案感兴趣,所以不需要javascript.

两个div的宽度都是动态的,所以我不能使用任何静态边距.

div的侧面和顶部之间的间距应该相同.

我尝试在内部div上使用margin:auto auto 0 auto,正如你在这个jsfiddle中看到的那样,但它只适用于左右.

解决方法

注意,以下尝试不能完全回答问题,因为孩子的宽度不能是动态的.

我们的想法是在孩子身上使用百分比宽度百分比margin-top值.这是一个响应式布局,请参阅代码中的注释,并在不同的窗口大小上进行尝试.

JSFiddle:http://jsfiddle.net/jkoycs6e/

body {
    margin: 0;
}
.outer {
    height: 100vh; /*for demo only*/
    background: teal;
    overflow: auto;
}
.inner {
    width: 80%;
    background: gold;
    margin: auto;
    margin-top: 10%; /* 100%-80%/2 */
}
<div class="outer">
    <div class="inner">
        hello<br/>hello<br/>hello
    </div>
</div>

总结

以上是编程之家为你收集整理的html – 如何为左,右和顶部定位具有相等边距的div全部内容,希望文章能够帮你解决html – 如何为左,右和顶部定位具有相等边距的div所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478
编程之家官方公众号

微信公众号搜索 “ 程序精选 ” ,选择关注!

微信公众号搜索 “ 程序精选 ”
精选程序员所需精品干货内容!