子 div 在最大 div 之后调整大小答案

【问题标题】：child divs resize after the biggest div子 div 在最大 div 之后调整大小
【发布时间】：2018-12-16 00:22:57
【问题描述】：

我正在尝试在父 div 中设置 3 个 div，父 div 将在子 div 的最大高度之后调整大小，但我也希望其他 2 个子 div 的大小与高度最大的 div 相同。

<div id="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

父 div 的宽度为 600px，没有给出高度，因此它会根据子 div 的最大高度进行扩展。

#parent {
  width: 600px;
  overflow: auto;
}

.child {
  width: 200px;
  float: left;
}

这是我到目前为止得到的，但如果子 div 有不同的高度，则父 div 高度是子 div 高度中最大的，但其他 2 个子 div 不采用父级（最大孩子的高度div 高度）。

提前谢谢你，丹尼尔！

【问题讨论】：

你能把这些答案中的任何一个选为正确答案吗？

标签： css html

【解决方案1】：

这个：http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks 和这个：http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/ 可能会有所帮助。

【讨论】：

【解决方案2】：

一种方法是使用 CSS display: grid 的新功能

#parent {
  display: grid;
  width: 100%;
  grid-template-columns: auto auto auto;
  
  /* Just for styling */
  text-align: center;
}

.child {  
  /* Just for styling */
  box-sizing: border-box;
  background-color: lightyellow;
  border: 2px dashed red;
  padding: 20px;
}

<div id="parent">
  <div class="child">This is first</div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>

或者另一个是display: flex。

#parent {
  display: flex;
  flex-flow: row nowrap;
}

.child {
  width: 33.3333%;  /* Force the column to be a third of the parent width */
  
  /* Just for styling */
  box-sizing: border-box;
  background-color: lightyellow;
  border: 2px dashed red;
  text-align: center;
  padding: 20px;
}

<div id="parent">
  <div class="child">The first one</div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius utLorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse volutpat dolor ante, eu ultricies eros molestie nec. Fusce laoreet laoreet nibh, vel vehicula nunc varius ut</div>
</div>

【讨论】：