为什么 div 100% 宽度不能按预期工作答案

【问题标题】：Why div 100% width doesn't work as expected为什么 div 100% 宽度不能按预期工作
【发布时间】：2011-09-10 06:03:30
【问题描述】：

我正在学习 CSS，但发现它并不总是那么直观（我猜，欢迎来到 webdev）。 :)

为了制作一个简单的静态进度条，我使用下面的 HTML 文件：

<html>
  <head></head>
  <body>
    <table border='1' cellspacing='0'>
      <tr>
        <td>Sample Cell</td>
        <td>
          <!-- This is meant to be a progress bar -->
          <div style="background-color: #0a0; width: 20%;">
            <div style="text-align: center; width: 300px;">
              Text Here!
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

我明白了：

这很好，除了第二列的宽度是固定的。但如果我继续将width: 300px 更改为width: 100%，文本会进入绿色框，而不是整个表格单元格。

如何在不施加特定长度限制的情况下用文本“填充”表格单元格？

【问题讨论】：

我很困惑，最终目标是什么？
我第二次混淆...100% 不等于像素数，就是这样。
你不需要一个表格来使用百分比吗？
@JohnathanKong - 不，因为他已将大小放在实际的 div 元素上。它的父元素是另一个 div 元素。
我不会将 div 放在表格单元格中。这是草率的，不必要的，它们都是块级元素。

标签： html css html-table

【解决方案1】：

通过将文本 div 放置在彩色 div 内（作为其子级），您就是在告诉 HTML 您希望文本出现在彩色 div 内。因此，内部 div 的 100% 宽度意味着无论其父 div 的宽度是多少，您已将其设置为 20%。

编辑：添加代码 *编辑：更新代码*

<html>
<head>
    <style>
        #bar{
            width: 100%;
            position: relative;
        }

        #progress{
            background-color: #0a0;
            width: 20%;
            position: absolute;
            z-index: 0;
        }

        #progress_text{
            text-align: center;
            width: 100%;
            position: relative;
            z-index:1;
        }
        .progress_cell{

        }

    </style>
  </head>
  <body>
    <table border='1' cellspacing='0'>
      <tr>
        <td>Sample Cell</td>
        <td class="progress_cell">
          <div id="bar">
             <!-- This is meant to be a progress bar -->
             <div id="progress">
               &nbsp;
             </div>
             <div id="progress_text">
                  Text Here! Text Here! But it's really long, and it's going to overflow ...
             </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>

【讨论】：

@Ken：这很有意义，但我想现在我的问题是：如何将文本和绿色 div 放在同一级别，以便它们重叠？
你会想要使用属性 position:absolute;将元素拉出正常的 HTML 流。您还需要在其中一个父元素上添加一个 position:relative。
在它的一个父元素（可能是表格单元格）上使用 position:relative 将告诉 html 它应该绝对定位，但相对于标记为“相对”的元素。
@Ken：看起来好像可行，但结果仍然不正确——文本位于灰色背景之上，但绿色位于 外部 i> 表格，在单元格下。 :\
所以我们将整个 bar 包裹在一个带有 position:relative 的 div 中。然后我将文本从进度指示器中拉出，并将其作为兄弟而不是孩子。向文本添加位置：绝对意味着它将绝对定位在最近的祖先位置：相对；。最后一部分是在文本中添加 top:0px，告诉它你想要它的位置。

【解决方案2】：

这是您对 html/css 的介绍。当你收到我的账单时谢谢我；）。首先...表格用于表格数据。不是第二个布局...

#wrapper {
    position:absolute;
    top:10px;
    left:50%;
    width:900px;
    height:500px;
    margin:0px auto 0px -450px;
    padding:0px;
    background-color:#369;
}

#box_1 {
    width:100%;
    height:100px;
    margin:0px auto;
    padding:0px;
    background-color:red;
}

这是 html ...

<html>
    <head>
    </head>
    <body>
        <div id="wrapper">
            <div id="box_1">
                <p>stuff</p>
            </div>
        </div>
    </body>
</html>

希望这可以帮助您入门

【讨论】：

是的，我的数据是表格的，但碰巧最后一列显示了进度，所以我也在那里显示了一个进度条。 :) 我试试看，谢谢。
您可以尝试在表格内使用 span 而不是 div。其中外部为 100%，跨度为 %
@b_dubb：我在<td> 中立即尝试了<span style="background-color: #ccc; width: 100%">，但只要我说100%，它只会缩放到文本宽度，而不是单元格宽度。
您想要进度条内的文本吗？为什么不在两条单独的线路上？