在另一个 div 中放置 3 个在同一行的 div

Question

我已在另一个 div 中创建了 3 列 div 并叠放在一起。现在想让它们与中间的 div 等高，并位于该 div 的顶部。请问有什么方法可以实现这个效果？

.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;
}

<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>

- Adrian

---

请查看此链接：http://callmenick.com/post/css-equal-height-columns-three-different-ways - Pbk1303

可能是 Sibling divs match height in container 的重复问题。 - Asim K T

Answer 1

您可以使用表格布局：

.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}

<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>

- potashin

---

你比我快了一秒钟 :) - dippas

Answer 2

你可以采用以下几种方式...

Flexbox:

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

这将在现代浏览器中运行（> ie9）。

---

表格：

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

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

这种方法在大多数情况下都可以使用，但是如果您使用表格来显示非表格数据，则可能会被互联网神灵诅咒您和您的后代。请参阅此问题以获取更多信息。

---

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;

这将在大多数浏览器中运行（> ie8），并且可以进行调整以在所有浏览器中运行（getElementsByClassNames 在 ie 9 以下不起作用，但您可以更改元素以通过 ID 进行识别以解决此问题）。

还要注意，中间 div 上的“p”标记上的边距可能会使对齐变得复杂。

- Ber

---

谢谢您解释了未来SEO可能面临的问题。我一定会考虑到这一点的。 - Adrian

Answer 3

尝试使用这个JavaScript插件，它应该涵盖你需要的所有内容; jquery-match-height。

- Amin Gharavi

Answer 4

我会选择flex-box，因为现在它有很高的支持。

.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>

- Asim K T

---

谢谢，这是一个非常好的方法，我一定会尝试。 - Adrian