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

概述我想实现一个如下所示的布局： 我对css / html唯一解决方案感兴趣,所以不需要javascript. 两个div的宽度都是动态的,所以我不能使用任何静态边距. div的侧面和顶部之间的间距应该相同. 我尝试在内部div上使用margin：auto auto 0 auto,正如你在这个jsfiddle中看到的那样,但它只适用于左右. 注意,以下尝试不能完全回答问题,因为孩子的宽度不能是动态的. 我想实现一个如下所示的布局：

我对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 >    <div >        hello<br/>hello<br/>hello    </div></div>

总结

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

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。