html - CSS float 的问题

Question

我正在尝试创建一个可以重新调整大小的动态弹出窗口。但是，由于我无法使用静态宽度，因此在使用 float 和宽度百分比时遇到了问题。

当我为 float div 的宽度指定百分比时，它假设我指的是包含 div 的宽度的 100%。我想要做的是将宽度设置为当前 div 中宽度的剩余部分。如果我使用表格，它会起作用。所以本质上，我需要能够为一个表获取以下代码并使用 div 使其工作...

<table style="width: 100px;" cellpadding="0" cellspacing="0">
   <tr style="height: 25px;">
      <td style="width: 10px; background-color: Red;"></td>
      <td style="background-color: Blue;"></td>
      <td style="width: 10px; background-color: Black;"></td>
   </tr>
</table>

显示以下内容:

到目前为止我有以下内容，但它没有按预期工作......

<div id="container" style="width: 100px; height: 25px;">
   <div id="left" style="float: left; width: 10px; background-color: Red; height: 100%;"></div>
   <div id="mid" style="float: left; background-color: Blue; height: 100%;"></div>
   <div id="right" style="float: right; width: 10px; background-color: Black; height: 100%;"></div>
</div>

上面的代码显示如下:

无论如何，如果有人可以帮助我将表格方法转换为适用于 div 的方法，我将不胜感激。

谢谢，
C

笔记:

我尝试将代码添加到实际帖子中，但帖子似乎没有解释 html。因此，它所说的“显示以下内容”的部分实际上并没有这样做。

Answer 1

默认情况下，div 是 block 级元素，因此您无需指定“display: block;”。