html - 多列式 CSS 布局

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 版本，称为“vanilla masonry” 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;
}