html - 如何创建两列布局

Question

我想知道是否可以通过以下方式设置两列布局:

我有

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>

<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>


<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



<div>
   <div>title </div>
   <div>content </div>
   <div>name </div>
   <div>data </div>
</div>



more....

我想要以下内容:

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

title       title
content     content
name        name
data        data

more ....

我不确定如何在 CSS 中执行此操作。有任何想法吗？非常感谢!

Answer 1

http://jsfiddle.net/fZse3/

<style>
#col1, #col2 {
    float:left;
    width: 50%;
}
</style>


  <div id="col1">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>

  <div id="col2">
     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>

     <div>
        <div>title </div>
        <div>content </div>
        <div>name </div>
        <div>data </div>
     </div>
  </div>​