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

Question

我想实现一个如下所示的布局:

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

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

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

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

Answer 1

请注意，由于width孩子的不能是动态的，因此以下尝试无法完全回答问题。

想法是对孩子使用百分比width+百分比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>

Answer 2

这不可能。至少在不使用 javascript 的情况下是这样。不存在纯 CSS 解决方案。