使用css布局（浮动）不同的高度块 [英] Layout (float) different height blocks with css

问题描述

我有这样的div，有这样的html，如下：

HTML

 < div> 
< a href =＃>无论您想在这里放什么东西。< / a> 
< a href =＃>无论您想在这里放什么东西。< / a> 
< a href =＃>无论您想在这里放什么东西。< / a> 
< / div> 
  

CSS

  div {
 -moz-column-count：3; 
 -moz-column-gap：10px; 
 -webkit-column-count：3; 
 -webkit-column-gap：10px; 
 column-count：3; 
 column-gap：10px; 
 width：480px; 
} 
 
 div a {
 display：inline-block; 
 margin-bottom：20px; 
 width：100％; 
} 
  

I have such div, with such html, as here:

http://pastebin.com/Xt2Ws2EU

and little css:

#manufacturers-list{
  width: 690px;
  height: 980px;
  max-height: 980px;
  margin: 10px 0 0 0;
  .man-area{
    margin: 6px 0 0 6px;
    width: 210px;
    float: left;
    ul, li{
      margin: 0;
      padding: 0 0 0 1px;
      list-style-type: none;
    }
    ul{
      padding: 0 0 0 10px;
    }
  }
  // *:nth-child(3n+1) {
  //    clear: both;
  // }
}

And in schema it looks so (left where i have red cross):

so everything is floated, but new element-line is only, after most max height block as in schema, but i need to style so, that blocks are floated without mind of max height block in line, how could i do this without js? only with css?

解决方案

chekout this post

HTML

<div>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
    <a href="#">Whatever stuff you want to put in here.</a>
</div>

CSS

div{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 480px;
}

div a{
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;
}

这篇关于使用css布局（浮动）不同的高度块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！