Question

我正在努力推动一个包含桌面右侧的桌子的div - 与左侧div相对。目前，第二个div位于第一个div之下。

#details { background-color: lightblue; } #summary { background-color: red; }

<div id="details" style="float:left; display:inline">
  <table>
    <tr>
      <td><b>Details</b></td>
    </tr>
    <tr>
      <td>Details Text:</td>
    </tr>

  </table>
</div>
<div id="summary" style="float:left; clear:left; display:inline">
  <table>
    <tr>
      <td><b>Summary</b></td>
    </tr>
    <tr>
      <td>Summary Text</td>
    </tr>
  </table>
</div>

有什么建议吗？

Answer 1

这是你在找什么？

您只需将style="float:left;"更改为style="float:right;"，然后移除clear＆amp;来自inline-block的两个div，

<div id="details" style="float:left; background-color:lightblue;">
  <table>
    <tr>
      <td><b>Details</b></td>
    </tr>
    <tr>
      <td>Details Text:</td>
    </tr>

  </table>
</div>
<div id="summary" style="float:right; background-color:red;">
  <table>
    <tr>
      <td><b>Summary</b></td>
    </tr>
    <tr>
      <td>Summary Text</td>
    </tr>
  </table>
</div>

Answer 2

如果你想让他们坐在对面，你想要让第一个向左浮动而第二个向右浮动。此外，在您的示例中，使用clear: left是将第二个表向下推到第二行的原因。我还在顶部的CSS声明中添加了样式标记;否则，它将作为实时文本放在页面上。

关于花车的另外一个注意事项 - 在大多数情况下，不需要将float和display: inline

组合在一起

＆＃13;

<style>#details { background-color: lightblue; } #summary { background-color: red; }</style>

<div id="details" style="float:left; display:block">
  <table>
    <tr>
      <td><b>Details</b>
      </td>
    </tr>
    <tr>
      <td>Details Text:</td>
    </tr>

  </table>
</div>
<div id="summary" style="float:right; display:block">
  <table>
    <tr>
      <td><b>Summary</b>
      </td>
    </tr>
    <tr>
      <td>Summary Text</td>
    </tr>
  </table>
</div>

＆＃13;

HTML divs没有使用自由标记浮动

2 个答案: