2017-04-25 126 views
0

我有一个网页,其中有5个相同的列的网格;每列有n个不同高度的盒子。网格对齐问题

所以这个网格的底部都被切碎了,每一排在不同的高度完成。

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 

和CSS

.row { 
    display: inline; 
    float: left; 
    width:20% 
} 

我以后要多箱与再次

<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 
<div class="row">...</div> 

问题添加到这些行(AJAX)的是,这些新的盒子不只是如我所期待的那样放在每一行的下方,但相反,所有的行都与上一行中的最下一行对齐。

visual example here of issue

用什么CSS我绕过这个问题?

回答

0

如果你正在寻找一个CSS“砖石”布局,可以使用CSS列

.rows { 
 
    column-count: 4; 
 
    column-gap: 1em; 
 
} 
 

 
.row { 
 
    background-color: #eee; 
 
    display: inline-block; 
 
    margin: 0 0 1em; 
 
    width: 100%; 
 
}
<div class="rows"> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">5</div> 
 
    <div class="row">2<br>lines</div> 
 
    <div class="row">7</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
    <div class="row">asdf<br> aasdf 
 
    </div> 
 
    <div class="row">4</div> 
 
    <div class="row">two<br> lines</div> 
 
    <div class="row">6</div> 
 
    <div class="row">7<br>lines</div> 
 
    <div class="row">7.5</div> 
 
    <div class="row">8</div> 
 
    <div class="row">9</div> 
 
    <div class="row">1</div> 
 
    <div class="row">2</div> 
 
    <div class="row">3</div> 
 
</div>

+0

感谢您的回答, 我知道我可能不够清楚:S 柔性表并不是我想要的,因为我想让每个div都保持在不同的高度。 而'明确:left'解决方案似乎basicly做,因为我已经有一点相同:/ Basicly溶液中(如果我把你的第一个表),他们将1,2,3,4之间没有间隙和5,2lines,7,8 –

+0

结果我想要的效果不能用CSS来完成:/ http://stackoverflow.com/questions/32102623/forcing-div-stack-from-left向右#32102623 http://stackoverflow.com/questions/5234749/css-floating-divs-at-variable-heights 感谢您的详细解答! –

+0

@JackSwindle哦,你想要一个石工布局?你可以使用css列http://w3bits.com/css-masonry/ –

0

如果您不介意高度不同,请使用display:inline-block和vertical-align:top代替左侧的float。这是由每个“行”元素的高度不同造成的。

.row{ 
    display: inline-block; 
    vertical-align: top; 
    width:20%; 
} 

你也可以考虑,使各要素相同的高度,其中使用任何弯曲或JavaScript,你检查它的div具有最高的高度,它适用于所有元素。

,如果你希望它有不同的高度,并希望它填补了国内空白,请参考这个问题

CSS Floating Divs At Variable Heights

+0

感谢您的回答! 我试图让它与你的建议一起工作,但似乎无法得到想要的效果呢:/ 你能给出一个像Michael一样的代码片吗? –

+0

啊感谢您的链接......结果不能用CSS来完成:/! –

0

.multiple-column{ 
 
    list-style: none; 
 
    padding: 0; 
 

 
    -webkit-column-count: 3; 
 
    -moz-column-count: 3; 
 
    column-count: 3; 
 
    -webkit-column-gap: 20px; 
 
    -moz-column-gap: 20px; 
 
    column-gap: 20px; 
 
} 
 
.multiple-column li{ 
 
    background: gray; 
 
    margin-bottom:10px; 
 
}
<ul class="multiple-column"> 
 
    <li style="height: 100px">A</li> 
 
    <li style="height: 200px">B</li> 
 
    <li style="height: 150px">C</a></li> 
 
    <li style="height: 120px">D</li> 
 
    <li style="height: 120px">E</li> 
 
    <li style="height: 60px">F</li> 
 
</ul>

浏览器需要支持CSS3。

+0

Thx为答案! 问题是,我想div的顺序从左到右。 最后我去了Isotope插件,似乎是最直接的去 –