使用CSS/Div像HTML表格設計頁面佈局

Question

由於我是CSS新手，我不確定以下頁面佈局是否可以使用Div/CSS或我應該使用HTML表格嗎？

我想要設計我的頁面，左側（即大約30％）分爲3部分有一定的餘量（即一列和三行），其餘頁面分爲兩行（即一列和兩列行）。

不知道我是否可以正確解釋。我有圖像文件，但Stackflow不允許我上傳，因爲名譽較低。

Answer 1

您不需要使用<table>作爲您描述的佈局（並且您不需要任何特定的CSS3或HTML5）。

實現此佈局有幾個選項。這裏有一個關於CSS佈局的一個很好的教程：

• CSS Layouts

這裏是你的佈局的一個例子：

• jsFiddle

HTML

<div class="left-column"> 
    <div>Left Side Row 1</div> 
    <div>Left Side Row 2</div> 
    <div>Left Side Row 3</div> 
</div> 
<div class="right-column"> 
    <div>Right Side Row 1</div> 
    <div>Right Side Row 2</div> 
</div> 

CSS

.left-column, .right-column{ 
    float:left; 
} 
.left-column{ 
    width:30%; 
} 
.right-column{ 
    width:60%; 
} 
div{ 
    padding:10px; 
    border:solid 1px black; 
} 

結果

Answer 2

的截圖聽起來像是你要麼需要一兩欄或三欄佈局。下面的幾個鏈接，瞭解如何創建兩種：

2列： http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/

3列： http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/

Answer 3

還有另一種方法，使表由div/css

- html 

    <div id="container"> 
     <div id="row"> 

     <div id="left"> 
      <h4>Left Col</h4> 
      <p>...</p> 
     </div> 

     <div id="middle"> 
      <h4>Middle Col</h4> 
      <p>...</p> 
     </div> 

     <div id="right"> 
      <h4>Right Col</h4> 
      <p>...</p> 
     </div> 

     </div> 
    </div> 

• CSS

#container的{ 顯示：表; }

＃行{ display：table-row; }

#left，#right，#middle { display：table-cell; }