Question

我正在寻找一个多列CSS布局，如下图链接所示。

http://i.imgur.com/Fhdyi.png

这是我正在寻找的那种语法......

<div class="container">
  <div id="1">#1</div>
  <div id="2">#2</div>
  <div id="3">#3</div>
     <!-- and so on... -->
</div>

我希望将哪些CSS属性应用于这些编号的DIV以使它们显示如下？ DIV的高度是可变的，但宽度是固定的。

非常感谢！

Answer 1

如何在列中分隔div？像这样：

.container #col1,#col2,#col3,#col4{
float:left;
}
.container #div1,#div2,#div3,#div4,#div5,#div6,#div7{
width:150px;
background:#000;
margin:0 20px 10px 0;
padding:10px;
color:#fff;
}

<div class="container">
<div id="col1">
    <div id="div1">#1</div>
    <div id="div2">#2</div>
</div>
<div id="col2">
    <div id="div3">#3</div>
</div>
<div id="col3">
    <div id="div4">#4</div>
    <div id="div5">#5</div>
    <div id="div6">#6</div>
</div>
<div id="col4">
<div id="div7">#7</div>
</div>
</div>

Answer 2

仅使用CSS并且仅使用CSS3不能很好地完成。

要回答您发布的问题，这是一个示例：http://sickdesigner.com/masonry-css-getting-awesome-with-css3/

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; /* Display inline-block, and absolutely NO FLOATS! */
    margin-bottom: 20px;
    width: 100%; }

<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>
...and so on and so forth ad nauseum.
</div>

问题在于，如果你有很多项目，你会看到顶部的每一列的第一个而不是前三个。

jQuery masonry插件对于这种布局来说是一个更好的选择：http://masonry.desandro.com/

还有一个简单的JS版本，称为“香草砖石” http://vanilla-masonry.desandro.com/

这样你的第一件物品就在顶部，按顺序看起来更好。

Answer 3

这是未经测试但可能是您正在寻找的类似内容：

#1{
    height:150px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}

#2{
    height:200px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;

}

#3{
    height:500px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    clear:both;

}

#4{
    height:50px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}


#5{
    height:100px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white; 
    float:left;

}


#6{
    height:200px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    float:left;
}


#7{
    height:500px;
    width:200px;
    border: 1px, solid, black;
    background-color:black;
    color:white;
    clear:left;
}

像CSS布局的多列

3 个答案: