如何在表格外編寫內容

Question

我想在我的wordpress網站上創建一個表格。我想把桌子放在右邊。問題是，如果我想在表格左側寫內容，那我該怎麼做。你能給我舉個例子嗎？

我是初學者在CSS所以請原諒我的寫作風格。

我想製作一個網站的樣式，就像（我附上的圖片）。你能幫我一下，我該如何在桌子左側自由寫字？

Answer 1

使用position: absolute：

#navbar { 
    position: absolute; left: 0; 
    width: 20%; 
} 

#content { 
    position: absolute; right: 0; /*Presuming this is the table*/ 
} 

Answer 2

你應該看看CSS的顯示性能，這主要用於網頁上的內容對齊。

http://www.w3schools.com/cssref/pr_class_display.asp

你指的是內容的div裏面的一張桌子？

#content { 
    margin-left:20%; 
} 
#navbar { 
float: left; 
width: 20%; 
}  
.table-wrapper { 
    display:inline-block; 
} 

<div id="layout"> 
    <div id="header">Top Header</div> 
    <div id="navbar">Navigation</div> 
    <div id="content"> 
     <div class="table-wrapper"> 
      <table><tr><td>table 1</td></tr></table>    
     </div> 
     <div class="table-wrapper"> 
      <table><tr><td>table 2</td></tr></table>    
     </div> 
    </div> 
    <div id="footer">Bottom Footer</div> 
</div> 

http://jsfiddle.net/KhH42/1/

Answer 3

像這樣的事情？

#wrapper { 
    border:solid 2px #000; 
    margin:20px; 
} 
#wrapper div[class*="col-"]{ 
    float:left; 
}  
.col-1 { width:30%; background:#eee; } 
.col-2 { width:30%; background:#e2e2e2; } 
.col-3 { width:40%; background:#ccc; }  
#wrapper:after { content:""; clear:both; display:block; } 

<div id="wrapper"> 
    <div class="col-1"> 
     <p>col 1 content</p> 
    </div> 
    <div class="col-2"> 
     <p>col 2 content</p> 
    </div> 
    <div class="col-3"> 
     <table> 
      <tr> 
       <td> 
        my table 
       </td> 
      </tr> 
     </table> 
    </div> 
</div> 

http://jsfiddle.net/3LUqg/