在其他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>

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>