等高柱，但有包装

http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/

it looks like this is the only solution to have equal height columns?

看起来这是唯一具有相同高度列的解决方案?

but how do I make the cells move to the 2nd row when they don't fit? Exactly like flex-wrap works.

但是当它们不适合时,如何使细胞移动到第2行?完全像flex-wrap一样。

.row > div {
  border: 1px solid red;
}
.equal {
  display: table;
  width: 100%;
}
.row {
  display: table-row;
}
.row div {
  display: table-cell;
}

<div class="equal">
  <div class="row">
    <div class="one" style="width:50%">sfsfdsfsf</div>
    <div class="two" style="width:25%">sfsfs
      <br/>sfsfsf</div>
    <div class="three" style="width:25%">sfsfs</div>
    <div class="one" style="width:50%">sfsfdsfsf</div>
    <div class="two" style="width:25%">sfsfs
      <br/>sfsfsf</div>
    <div class="three" style="width:25%">sfsfs</div>

  </div>
</div>

2 个解决方案

#1

.row div {
  display: inline-block;
  float: left;
}

So if you have 25% + 25% + 25% + 25% + 25%, the first 4 will be in a row and the 5th will go down to a new row.

因此,如果您有25%+ 25%+ 25%+ 25%+ 25%,前4个将连续,第5个将下降到新行。

#2

If you want to make equal height columns that wrap when they don't fit, I would use either inline-block or float with overflow-y: scroll. Probably not a great UX, but this is the only solution I can think of. Maybe don't have overflowing content.

如果你想在它们不适合时使用相同高度的列进行换行,我会使用inline-block或float with overflow-y:scroll。可能不是一个伟大的用户体验,但这是我能想到的唯一解决方案。也许没有溢出的内容。

With inline-block:


  
  
   
    
    .container {
  font-size: 0; /* to fight the space between inline-block items, see this: http://css-tricks.com/fighting-the-space-between-inline-block-elements/ */
}
.container .column {
  font-size: 16px;
  display: inline-block;
  background: salmon;
  width: 25%;
  height: 50px;
  overflow-y: scroll;
} 
    <div class="container">
  <div class="column">Column</div>
  <div class="column">Column<br>with<br>lot<br>and<br>tons<br>of<br>extra<br>stuff</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

With float:


  
  
   
    
    .column {
  display: float;
  background: salmon;
  width: 25%;
  height: 50px;
  overflow-y: scroll;
} 
    <div class="container">
  <div class="column">Column</div>
  <div class="column">Column<br>with<br>lot<br>and<br>tons<br>of<br>extra<br>stuff</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
  <div class="column">Column</div>
</div>

But if you can use flex box, that would be even cooler.

但如果你可以使用柔性盒,那就更酷了。

#1

.row div {
  display: inline-block;
  float: left;
}