浮动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垂直排队

回答

相关问题