CSS浮动的问题

reg*_*gex 3 html css

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

当我指定浮动div的宽度的百分比时,它假定我的意思100%是包含div的宽度.我正在尝试做的是将宽度设置为当前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>
Run Code Online (Sandbox Code Playgroud)

显示以下内容:


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

<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>
Run Code Online (Sandbox Code Playgroud)

上面的代码显示以下内容:


无论如何,如果有人可以帮助我将表格方法翻译成可以与div一起使用的东西,我会非常感激.

谢谢,
C



注意:

我尝试将代码添加到实际帖子中,但似乎帖子没有解释html.因此,"显示以下内容"的部分实际上并没有这样做.

Nat*_*ers 5

默认情况下,div是块级元素,因此您无需指定"display:block;".