將表格佈局轉換爲CSS佈局

我需要一些幫助，使此佈局僅適用於div和css。將表格佈局轉換爲CSS佈局

<table> 
    <tr> 
     <td colspan="2">Header</td> 
    </tr> 
    <tr> 
     <td>Side Bar</td> 
     <td> 
      <table> 
       <tr> 
        <td>Top Menu</td> 
       </tr> 
       <tr> 
        <td>Main Content</td> 
       </tr> 
      </table> 
     </td> 
    </tr> 
    <tr> 
     <td colspan="2">Footer</td> 
    </tr> 
</table>

我想是這樣的：

<div id="page"> 
    <div id="main-header"></div> 
    <div> 
     <div id="side-bar"></div> 
     <div> 
      <div id="top-nav"></div> 
      <div id="main-content"></div> 
     </div> 
    </div> 
    <div id="main-footer"></div> 
</div>

但我對CSS有點卡住了。

來源

2012-10-11 Sam

我試過一些float = left divs，但後來主要內容浮起來了，如果我清除它會在整個佈局下面。 – Sam

您需要發佈您的html＆css並從那裏採取。 – Jawad

這是我想出了：

<!DOCTYPE HTML> 
<html lang="en-US"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
     * { 
      margin: 0; 
      padding: 0; 
      box-sizing: border-box; 
     } 
     body { 
      font-size: 16px; 
     } 
     #wrapper { 
      width: 80%; 
      min-width: 500px; 
      margin: 10px auto; 
      background: rgb(200,200,200); 
     } 
     #wrapper header h1 { 
      text-align: center; 
      background: #BADA55; 
     } 
     #wrapper nav ul { 
      list-style: none; 
      font-size: 0; 
      text-align: center; 
      background: red; 
     } 
     #wrapper nav ul li { 
      display: inline-block; 
      font-size: 16px; 
      padding: 1em 2em; 
     } 
     #wrapper aside { 
      float: left; 
      width: 30%; 
      background: blue; 
     } 
     #main_content { 
      float: right; 
      width: 70%; 
      background: green; 
     } 
     #wrapper footer { 
      clear: both; 
      background: black; 
      color: white; 
     } 
    </style> 
</head> 
<body> 

<section id="wrapper"> 
    <header> 
     <h1>Main Header</h1> 
     <nav> 
      <ul> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
       <li>Link</li> 
      </ul> 
     </nav> 
    </header> 
    <section id="main_content"> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> 
    </section> 
    <aside> 
     <h3>Sidebar</h3> 
     <p>Sidebar content</p> 
    </aside> 
    <footer> 
     <p><small>Footer Information</small></p> 
    </footer> 
</section> 

</body> 
</html>

它分爲色彩，從而使每一個元素是很容易識別。

如果您對CSS/HTML有任何疑問，可以在評論中提問，我會回答。

div是一個通用的，完全非語義的包裝元素。如果沒有其他元素適合工作，則只使用<div>。如你所見，這裏沒有。所有元素都是語義和適當的。

來源

2012-10-11 17:19:01

我認爲CSS是OP正在尋找的東西。 – j08691

「一點卡住CSS」你也需要發佈你的CSS。意思是OP – Jawad

我還沒有css，沒什麼好用的 – Sam

將表格佈局轉換爲CSS佈局

回答

相關問題