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

Question

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

我对仅使用css / html的解决方案感兴趣，因此无需使用javascript。

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

div的两侧和顶部之间的间距应该相同。

我尝试在内部div上使用margin: auto auto 0 auto，正如您在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解决方案。

Answer 3

将外部父级溢出设置为auto，并为margin-top设置相对值。像这样：

＆＃13;

＆＃13;

.outer {
    background: blue;
    overflow: auto;
}
.inner {
    background:yellow;
    width: 100px;
    height: 100px;
    margin: 1em auto 0 auto;
}

＆＃13;

<div class="outer">
    <div class="inner">
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

这似乎有效：

.outer {
    height: 500px;
    width: 300px;
    background: blue;
    position: relative;
}

.inner {
    width: 80%;
    height: 200px;
    background:green;
    position: absolute;
    margin-left: 10%;
    margin-right: 10%;
    margin-top: 10%;
    margin-bottom: 0;
}

您可以根据k的预期值更改为边距标记的百分比。

这里是fiddle

编辑：请注意width的{​​{1}}必须按百分比设置才能生效。另请注意，当以百分比指定保证金时，保证金的值将计算为容器的 width 的百分比。即使对于垂直边距，百分比也会应用于容器的 width （而不是 height ）。

这里有SO post，有助于了解如何根据容器定位元素。

Answer 5

此答案实际上并未使用margin属性，也只有两个div。

body {
    font-size: 26px;
    text-align: center;
    font-family: monospace;
  }


  #container {
    display: inline-block;
    position: relative;
    width: 100%;
  }

  #dummy {
    margin-top: 20%;
  }

  #element {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: silver
    /* show me! */
  }

  #wrapper {
    display: table;
    width: 100%;
  }

  #row {
    display: table-header-group;
  }

  #left {
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  }

  #incenter {
    display: table-cell;
    background-color: aqua;
  }

  #right {
    display: table-cell;
    background-color: chartreuse;
    width: 20%;
  }

<div>
    <div id="container">
      <div id="dummy"></div>
      <div id="element">
        k (20%)
      </div>
    </div>
    <div id="wrapper">
      <div id="row">
        <div id="left">width = k (20%)</div>
        <div id="incenter">incenter</div>
        <div id="right">width = k (20%)</div>
      </div>
    </div>
  </div>

另一个以像素为单位测量的示例是here。

有关说明，请参阅：

https://stackoverflow.com/a/12121309/2534513

https://stackoverflow.com/a/6615994/2534513

我实际上已经将上面两个答案中提到的技术结合起来制作了这个。 使用JavaScript本来会容易得多。