Div以下，不在右邊

我做了一個名爲toolbar的div。另一個名爲site的div應該在右側。相反，它在左邊。Div以下，不在右邊

body { 
    background-color: #e3cbb7; 
} 

.container { 
    display: table; 
    width: 100%; 
} 

.toolbar { 
    display: table-cell; 
    padding-top: 35px; 
    width: 200px; 
    background-color: #444444; 
    text-align: center; 
} 

.tools { 
    display: inline-table; 
} 

.tools, 
.text, 
.clear, 
.copy, 
.cut, 
.paste, 
.replace { 
    margin-bottom: 30px; 
    height: 50px; 
    width: 150px; 
} 

.site { 
    display: table-cell; 
    width: 600px; 
    height: 600px; 
    background-color: #ffffff; 
} 

p { 
    margin-top: 0px; 
}

<div class='container'> 
    <div class='toolbar'> 
    <table class='tools'> 
     <tr> 
     <td> 
      <button class='text'> 
      Add text 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <button class='clear'> 
      Clear text 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <button class='copy'> 
      Copy to site 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <button class='cut'> 
      Cut to site 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <button class='paste'> 
      Paste to site 
      </button> 
     </td> 
     </tr> 
     <tr> 
     <td> 
      <button class='replace'> 
      Replace to site 
      </button> 
     </td> 
     </tr> 
    </table> 
    </div> 
    <div class='site'> 
    <p> 
     Put text here. 
    </p> 
    </div> 
</div>

來源

2016-03-10 redwolf10105

當你與display: table開始的時候，你可以通過繼續作爲一個添加container，並使toolbar和site爲display: table-cell。

body { 
 
    background-color: #e3cbb7; 
 
} 
 
.container { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.toolbar { 
 
    display: table-cell; 
 
    padding-top: 10px; 
 
    width: 200px; 
 
    background-color: #444444; 
 
    text-align: center; 
 
} 
 
.tools { 
 
    display: inline-table; 
 
} 
 
.tools,.text,.image,.table,.jsbutton,.addons,.done { 
 
    margin-bottom: 6px; 
 
    height: 50px; 
 
    width: 150px; 
 
} 
 
.site { 
 
    display: table-cell; 
 
    width: 600px; 
 
    height: 600px; 
 
    background-color: #ffffff; 
 
}

<div class='container'> 
 
    <div class='toolbar'> 
 
    <table class='tools'> 
 
     <tr> 
 
     <td> 
 
      <button class='text'> 
 
      Add text 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='image'> 
 
      Add image 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='table'> 
 
      Add table 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='jsbutton'> 
 
      Add button 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='addons'> 
 
      Add-ons 
 
      </button> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td> 
 
      <button class='done'> 
 
      Done! 
 
      </button> 
 
     </td> 
 
     </tr> 
 
    </table> 
 
    </div> 
 
    <div class='site'> 
 
    </div> 
 
</div>

來源

2016-03-10 14:37:43 LGSon

這張照片看起來並不像我想要的那樣，但效果很好，無論如何，我認爲我會更喜歡這種方式。 – redwolf10105

我試圖在'site'中放置一些代碼，但是它從div的頂部向下降低了大約150個像素。我嘗試過'margin-top'和'padding-top'，但它們不起作用。 – redwolf10105

@ redwolf10105如果您使用該代碼更新您的問題，我會看看並幫助您使其工作。 – LGSon