Question

我做了一个名为toolbar的div。名为site的另一个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>

Answer 1

您需要将float: right添加到.toolbar

https://jsfiddle.net/t3bd3v61/

或者检查一下：

https://jsfiddle.net/t3bd3v61/1/

Answer 2

根据您需要支持的浏览器，您可以使用flexbox。将两个div包装在一个容器元素中并将display: flex放在其上：

https://jsfiddle.net/h8nqa6Lo/

更多关于flexbox的信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

Answer 3

问题是，默认情况下，div会展开以占用可用的整个水平空间，因此它被强制放在其他元素下面。

在.toolBar css规则中添加以下内容，使其更像span，而不占用整个水平空间：

display: inline-block;

Answer 4

当您开始使用display: table时，您可以通过添加container作为一个来继续，并将toolbar和site设为display: table-cell。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Div低于，不在右边

4 个答案: