如何创建两列布局

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>​

Answer 2

这是一个简单的解决方案......

    <div id="1" style="float: left; width: 200px;">
    <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 id="2" style="float: left;  width: 200px;">
    <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>

你可以在这里看到它的样子...... Demo