CSS浮动的问题

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的内容，我将非常感激。

谢谢，
C

我尝试将代码添加到实际文章中，但似乎该文章未解释html。因此，其中显示“显示以下内容”的部分实际上并没有显示。

- regex

Answer 1

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

- Nathan Bowers

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>

- dylanfm

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，但发布时没有显示。

编辑：添加了可工作的代码。

- dr.manhattan

---

尽管你的解决方案可行，但它并不是因为块部分而起作用，而是因为你将所有div的宽度设置为33%。对我来说这并不是很可行，因为我需要右侧和左侧的部分为10像素，以适应背景图像。 - regex

div元素默认情况下不是块级元素吗？我非常确定它们是的。 - dylanfm

@regex1 我理解错了问题，现在我正在重新编写CSS。 - dr.manhattan

不需要 display: block;，因为 DIV 元素默认是块级元素。当浮动时，元素也会成为块级元素。 - Arve Systad