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

发布于 2024-11-14 10:49:11 字数 879 浏览 0 评论 0原文

我正在学习 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>

我得到了：

Progress Bar

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

如何使用文本“填充”表格单元格，而不施加特定的长度限制？

原文

I'm learning CSS and finding that it's not always so intuitive (welcome to webdev, I guess). :)

In an attempt to make a simple, static progress bar, I use the HTML file below:

<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>

and I get this:

Progress Bar

which is good, except for the fact that the width of the second column is fixed. But if I go ahead and change width: 300px to width: 100%, the text instead goes into the green box, rather than the whole table cell.

How can I "fill" the table cell with the text, without imposing a specific length restriction?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

忆离笙 2024-11-21 10:49:11

通过将文本 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">
                
             </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>

By placing your text div inside (as a child of) your colored div, you're telling HTML that you want the text to appear inside the colored div. So a width of 100% on the inner div means whatever the width of its parent div is, which you have set to 20%.

EDIT: added code
*EDIT: updated code*

<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">
                
             </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>

回复收藏 0 原文

彼岸花似海 2024-11-21 10:49:11

这是您对 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>

希望这可以帮助您入门

here's your intro to html / css. thank me when you get my bill ;). first ... tables are for tabular data. not layout second ...

#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;
}

and here's the html ...

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

hope this helps get you started

回复收藏 0 原文