плавающие divs для вертикальной линейки

Question

Я хотел бы, чтобы следующие плавающие divs выстроились вертикально: 4-й div класса «box1» должен начинаться внизу (после 5px margin) div, который находится над ним, а не на нижняя часть нижнего div во всей верхней строке, то же самое для следующих div. Как я могу сделать это с помощью css.
(плавающая не обязательно, если есть другой способ добиться этого с помощью CSS только)

fiddle

HTML:

<div id="conainer"> 
    <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing eli 
    </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al 
    </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
    </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicin 
    </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul 
    </div> 
</div> 

CSS:

#conainer {display:block;} 
.box1 {width: 31%; display:inline-block; border: thin solid black; margin:5px; float:left;} 

Answer 1

CSS сам по себе может быть очень сложно настроить такие правила для работы. Однако, если вы знаете, какие коробки будут выровнены по верху которого коробка, то вы можете настроить столбцы так:

<div id="conainer"> 
    <div class="column"> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing eli 
     </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicin 
     </div> 
    </div> 
    <div class="column"> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna al 
     </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris 
     </div> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> 
     </div> 
    <div class="column"> 
     <div class="box1"> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ul 
     </div> 
    </div> 
</div> 

Затем применить CSS к каждым колонкам поплавка влево, в то время как коробки внутри его плавают на дно.

#conainer { 
    display:block; 
} 
.column { 
    width: 31%; 
    display:inline-block; 
    float:left; 
} 
.box1 { 
    border: thin solid black; 
    margin:5px; 
    float: bottom; 
} 

Example fiddle

Кроме того, в зависимости от того, что вы пытаетесь достичь, равная по высоте дива может помочь решить вашу проблему. Example fiddle