如何創建一個兩個欄佈局

我想知道如果有一種方法來設置一個兩欄佈局有以下：如何創建一個兩個欄佈局

我已經

<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中做到這一點。有任何想法嗎？非常感謝！

來源

2012-11-07 FlyingCat

使用HTML表格。他們工作得很好。否則，使用div，使用'display：inline'並預先確定div的寬度。 – Navneet

HTML表格只能用於顯示錶格數據。對於佈局和定位，請考慮CSS。 – Don

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>

來源

2012-11-07 23:33:43 KingKongFrog

下面是一個簡單的解決方案...

<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

來源

2012-11-07 23:35:16 TheLawrence

如何創建一個兩個欄佈局

回答

相關問題