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