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

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>

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