Stack divs with different heights

问题

I want to stack divs with different heights but same width within a div container.. from top to bottom going right.

Problem now is with divs that are short.. gives a ugly gap to the div above.

I've added a small sketch with what i want to do..

Thanks from norway!

回答1:

I suppose that you are using jQuery on your site. From the sketch I suggest to take a look at jQuery plugin called Masonry.

回答2:

CSS:

.column { width:20em; float:left }
.column div { background:red; margin:1em }

HTML:

<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="column">
    <div></div>
    <div></div>
    <div></div>
</div>

回答3:

Have a look at using CSS Columns

Here's the W3C spec, but a slightly easier read might be PPK's write up.

回答4:

Use three column divs within container div. Each floats left. Add a div at the top and at the bottom that's empty and clears on both sides.

.column { float: left; width: whatever you want it to be; margin-left: whatever you want it to be; }

.clear{ clear: both; height: 0px; }

.column div{ margin-bottom: whatever you want it to be; width: whatever you want it to be; }

       <div id='container'>

<div class='clear'>&nbsp;</div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

  <div class='column'>
 <div>blah blah blah</div><div>blah blah blah</div>... etc
   </div>

  <div class='column'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
  </div>

<div class='clear'>&nbsp;</div>

       </div>

来源：https://stackoverflow.com/questions/6131661/stack-divs-with-different-heights

标签

html

layer