CSS浮动不同高度的Div与它们之间的空间对齐 [英] CSS Floating Divs with different height are aligned with space between them

问题描述

我使用左浮动DIV模拟两列布局（每个div包含文本字段编辑不同的数据，如名称，爱好，...）。所以它应该看起来像这样

  1 2 
 3 4 
 5 6 
  

现在我的div盒子并不总是相同的，因为一些DIVs有更多的元素比其他。现在我的布局看起来像这样

  1 2 
 2 
 3 4 
 5 6 
  

您还可以在将做你想要的。

如果你想坚持使用纯CSS，你可以做类似下面的事情，但我不认为这是你要做的：

 < div class =col> 
< div class =one>< / div> 
< div class =three>< / div> 
< div class =five>< / div> 
< div class =seven>< / div> 
< / div> 
 
< div class =two>< / div> 
< div class =four>< / div> 
< div class =six>< / div> 
< div class =eight>我们欣赏谁< / div> 
< / div> 
  

和CSS：

  .col {
 float：left; 
 width：200px; 
} 
  

i am using left floating DIVs to simulate a two column layout (each div contains textfield to edit different data, like name, hobbies,...). So it should look like this

1 2
3 4
5 6

Now my div-boxes aren't always the same, since some DIVs have more elements than the other ones. Now my layout looks likes this

   1 2
     2 
   3 4
   5 6

You can also see the effect on this example if you scale your so that only four or three colums are shown. E.g. if 4 columns are shown in a row there is much space between Float 1 and Float 6. This doesn't look good on my UI. What I want is to have Float 6 following Float 1 with no space in between (except the margin I define)

Edit: My DIVs basically just contain a float:left and a width:40%, so that two fit on a screen

Here's a screenshot showing more

解决方案

The jQuery Masonry plugin will do exactly what you want.

If you wanted to stick with pure CSS, you could do something like the following, but I don't think it's what you're going for:

<div class="col">
   <div class="one"></div>
   <div class="three"></div>
   <div class="five"></div>
   <div class="seven"></div>
</div>
<div class="col">
   <div class="two"></div>
   <div class="four"></div>
   <div class="six"></div>
   <div class="eight">who do we appreciate</div>
</div>

And the CSS:

.col {
    float: left;
    width: 200px;
}

这篇关于CSS浮动不同高度的Div与它们之间的空间对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！