HTML 使用自由标记的 div 不向右浮动

Question

我正在努力将包含 table 的 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;" 并从两个 div 中删除 clear 和 inline-block，

<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 是将第二个 table 推到第二行的原因。我还在顶部的 CSS 声明中添加了样式标签；否则，它只会作为实时文本放置在页面上。

关于浮点数的更多注意事项 - 在大多数情况下，不需要组合 float 和 display: inline

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

HTML 使用自由标记的 div 不向右浮动

HTML divs not floating right using free marker

html

css

freemarker