Question

html结构：

<div id="container">
  <div id="a">
  </div>

    <div id="b">
    </div>
</div>

的CSS：

#container {
  background-color:blue;
  text-align:center;
  margin:0 auto;
  width:60%;
  padding:20px;
  position:relative;
}

#a {
  background-color:green;
  width:40%;
  display:inline-block;
  vertical-align:top;
  height:100%;
}

#b {
  background-color:red;
  width:40%;
  display:inline-block;
  vertical-align:top;
  height:100%;
}

有没有办法通过使用“容器”等于最长div的高度这一事实将“a”的高度设置为“b”的高度？如你所见，我试图通过将容器的高度设置为auto（= height等于最长的div）来实现这一点，然后将div的高度“a”和“b”设置为100％。但那不行。

我想避免使用js。

Codepen：http://codepen.io/danielpixelz/pen/VLLpjO

Answer 1

当然，只需将子格的显示从inline-block更改为table-cell：

#a, #b {
    display:table-cell;
}

<强> jsFiddle example

#container {
    background-color:blue;
    text-align:center;
    margin:0 auto;
    width:60%;
    padding:20px;
    position:relative;
}
#a {
    background-color:green;
    width:40%;
}
#b {
    background-color:red;
    width:40%;
}
#a, #b {
    display:table-cell;
}

<div id="container">
    <div id="a">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    <div id="b">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata</div>
</div>

Answer 2

我有一种感觉，你想要复制一个表的样式，但没有表格的语法。

分配两个＆＃34; a＆＃34;和＆＃34; b＆＃34; div显示的css：table-cell;

  display:table-cell;

您可能希望研究其浏览器接受度，因为它可能不适用于所有浏览器。

http://codepen.io/anon/pen/WvvpOp

Answer 3

如果您可以非常轻松地使用flex，请查看演示

http://jsfiddle.net/Flocke/vxUb2/

如何在没有js

3 个答案: