0

我正在尝试在父 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 的高度） ）。

提前谢谢你，丹尼尔！

4

2 回答 2

0

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

于 2012-08-04T15:32:06.117 回答
0

一种方法是使用 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>

于 2018-12-15T16:22:57.500 回答