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>