在HTML/CSS中实现列

CSS3 multi-column model -moz versions of some of the properties Safari浏览器/Chrome浏览器 -webkit versions

你可以将div1和div2包装在一个包装器div中,将div 3和div 4包装在包装器div内,然后将这两个包装器包装在外包装器中。使用一些css来正确格式化,你应该可以开始了。html可能看起来像这样:

<div class="wrap">
  <div class="col">
     <div>div1</div>
     <div>div2</div>
  </div>
  <div class="col">
     <div>div3</div>
     <div>div4</div>
  </div>
</div>

然后,有一些这样的css:

.wrap {
  position: relative;
  overflow: auto;
}
.col {
  float: left;
  width: 400px;
}

这应该是正确的。

使用float,如下所示:

<style>
.col1{
 width: 400px;
 height: 100px;
 float: left;
}
.col2{
 width: 400px;
 height: 150px;
 float: left;
}
.col3{
 width: 400px;
 height: 200px;
 float: left;
}
</style>
<div style="width: 1200px;">
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
  <div class="col1">div1</div>
  <div class="col2">div2</div>
  <div class="col3">div3</div>
</div>

http://960.gs/ ?