Question

我在另一个div中创建了3列div，并且在如何使它们与中间div相同的高度并且位于div的顶部时堆叠。你能否建议如何做到这一点？

＆＃13;

.div-box {
  width: 500px;
  margin: 0 auto;
}

.left {
  width: 200px;
  height: 100px;
  background-color: red;
  display: inline-block;
}

.mid {
  width: 200px;
  display: inline-block;
}

.right {
  width: 50px;
  height: 100px;
  background-color: black;
  display: inline-block;
}

＆＃13;

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

＆＃13;

Answer 1

您可以使用表格布局：

＆＃13;

.div-box {
  width: 500px;
  margin: 0 auto;
  display: table;
}

.div-box > div{display: table-cell}

.left {background-color: red}

.mid {width: 200px}

.right {background-color: black}

＆＃13;

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

＆＃13;

Answer 2

试试这个js插件，它应该涵盖你需要的一切; jquery-match-height

Answer 3

有几种方法可以解决这个问题......

Flexbox的：

.div-box {    
  display: flex;
  align-items: center;
}

这适用于现代浏览器（＆gt; ie9）。

表：

.div-box {
  display: table; 
  table-layout: fixed;
}

/*catches immediate children of div-box*/
.div-box > * {
  display: table-cell;
}

这几乎适用于所有情况，但互联网上帝可能会诅咒你和你的后代使用表来显示非表格数据。 See this question了解更多信息。

JavaScript的：

      var childrenOfDivBox = document.getElementsByClassName("div-box")[0].getElementsByTagName("div"); /*grabs a collection of all the divs under div-box*/

      /*the middle div is the second child, hence childrenOgDivBox[1], due to zero-based counting */   
      var middleHeight = childrenOfDivBox[1].offsetHeight;

      childrenOfDivBox[0].style.height = middleHeight; 
      childrenOfDivBox[2].style.height = middleHeight;

这适用于大多数浏览器（＆gt; ie8），并且可以按摩以在所有浏览器中工作（getElementsByClassNames将无法在9以下工作，但您可以通过ID更改要识别的元素以解决此问题）

另请注意，中间div上'p'标签上的边距可能会使对齐变得复杂。

Answer 4

我会选择flex-box，因为它现在有support。

.div-box {
  width: 500px;
  margin: 0 auto;
  display: flex;
}

.left {
  width: 200px;
  background-color: red;
  display: flex;
}

.mid {
  width: 200px;
  display: flex;
}

.right {
  width: 50px;
  background-color: black;
  display: flex;
}

<div class='div-box'>
  <div class='left'></div>
  <div class='mid'>
    <p>Cardigan knausgaard kinfolk humblebrag hashtag. Chambray banh mi mustache, quinoa flannel craft beer tacos vinyl. Ethical swag everyday carry, typewriter crucifix mustache cornhole next level iPhone squid. Slow-carb flannel chambray man bun, migas
  </p>
  </div>
  <div class='right'></div>
</div>

在其他div内的同一行上有3个div

4 个答案: