浮動divs垂直排隊

我想下面的浮動divs垂直排隊：類「box1」的第四個div應該開始在底部（5px餘量）的div上方，而不是在整個上排中最低的div的底部，對於後面的div也是如此。我怎樣才能用CSS來做到這一點。
（浮動不是必須的，如果有另一種方式只用CSS來實現這一目標）浮動divs垂直排隊

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;}

來源

2014-09-28 PhilD

不幸的是CSS不會幫你在這裏。看看[同位素]（http://isotope.metafizzy.co/） – Danield 2014-09-28 08:38:56

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

此外，這取決於你想要達到的目的，相同高度的div可能會幫助您解決問題。 Example fiddle

來源

2014-09-28 08:49:07

如果有第三行，這個答案可能不適合這個問題。 – 2014-09-28 08:54:37

根據提問者的要求，它可能。如果有第三或第四行，他所要做的就是將他想要的框添加到它們各自的列中。但是，對於具有動態大小的盒子的極其流暢的解決方案，我不認爲CSS本身足夠強大... – 2014-09-28 08:57:49

猜測這是網格設計/定位的基礎知識......沒有js – PhilD 2014-09-28 09:40:45

浮動divs垂直排隊

回答

相關問題