Question

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

当我指定浮动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一起使用的东西，我会非常感激。

谢谢，
ç

注意：

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

Answer 1

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

Answer 2

您可以尝试这样的事情：

<div style="width:100px;height:25px;position:relative">
  <div style="width:20px;height:100%;position:absolute;background:red">&nbsp;</div>
  <div style="width:20px;height:100%;position:absolute;right:0;background:black">&nbsp;</div>
  <div style="height:100%;background:blue;padding:0 20px">
    Stuff
  </div>
</div>

Answer 3

您可以使用浮点数完成任务，而不是绝对定位。

<div id="container" style="display: block; width: 700px; height: 100px;">
    <div id="left" style="display: block; float: left; width: 10px; background-color: Red; height: 100%;">Div 1</div>
    <div id="mid" style="display: block; width: 90%; float: left; background-color: Blue; height: 100%;">Div 2</div>
    <div id="right" style="display: block; float: left; width: 10px; background-color: Green; height: 100%;">Div 3</div>
</div>

你缺少的是display: block标签，它使div的行为像块级元素一样，它会浮动你指定的方式。此外，由于你不能占用100％的父块，我使用了90％，它在Firefox下产生的工作结果不确定IE或Opera。

预览会显示Div 1，Div 2，Div 3，但发布后却没有

编辑：添加了工作代码。

CSS浮动的问题

3 个答案: