Question

完整来源位于： http://nounz.if4it.com/Nouns/Applications/A_Application_1.NodeComponent.html

问题：有一个HTML div用于网页标题，最终包含一个表格，左侧徽标有三列，中心标题和右侧徽标。我将div宽度设置为＆＃34; 100％＆＃34;在CSS语句中，div不是在水平方向上动态扩展以适合窗口的宽度。

简而言之，SVG画布，在页面的下方，需要更宽的div，我希望让所有其他全宽div都水平扩展以保持整洁。

div代码如下：

  <div class="div_Header">
    <table class="table_Header">
      <tr>
        <td class="td_HeaderLeft"><img src="../../IMAGES/SITE_HEADERS/IF4IT_Logo.png" alt="Header Left Image" /></td>
        <td><img src="../../IMAGES/SITE_HEADERS/Title_Gold_Shadow.png" alt="Header Center Image" /></td>
        <td class="td_HeaderRight"><img src="../../IMAGES/SITE_HEADERS/NOUNZ_Logo_DarkBlueAndGold.png" alt="Header Left Image" /></td>
      </tr>
    </table>
  </div>

正在使用的CSS语句是：

  div.div_Header {
    width: 100%;
    border:2px solid White;
    border-radius:7px;
    background: WhiteSmoke;
    font: bold 14px Arial;
    font-family:Arial, Helvetica, sans-serif;
    color:WhiteSmoke;
    text-align:center;
  }

我已尝试添加＆＃34; 溢出：自动; ＆＃34;正如other SO post on the topic中所建议的那样。但是，它似乎无法发挥作用。

有关如何最好地解决问题的任何想法？

Answer 1

你需要在body元素上填充填充和边距，以防止浏览器本机样式表应用这些属性，这会阻止你在div上使用真正的100％宽度：

body {
    margin:0px;
    padding:0px;
}

Answer 2

本文将部分解释实际答案，标题为：“Using CSS "Display: table-cell" for columns”。但是，它也未涵盖完整答案。下面的代码包括完整的答案，并已经过测试。

答案的第一部分是确保为整个html和正文包络提供基线......

html, body {
  margin: 0px;
  padding: 0px;
  width: 100%;
}

答案的第二部分是创建一个全宽div，它将充当子div的容器。正如上文所述，使用“ display：table; ”属性，应该告诉包含div“表现得像HTML表格元素”... / p>

div#div_header_container {
  background: ' + headerBackgroundColor + ';
  border:2px solid ' + 'White' + ';
  border-radius:7px;
  width: 100%;
  display: table;
  vertical-align: middle;
}

第三，每个子div（在这种情况下有三个）应该被赋予一个宽度，即父容器的百分比。并且，由于父容器被告知其行为类似于HTML表元素，因此应该告诉这些子div使用“display：table-cell”作为表单元格。属性。它们还应设置为使用“ vertical-align：middle; ”属性在中间垂直对齐元素，确保每个子div中的每个图像都沿着它们的中间对齐。

div#div_header_left {
  width: 20%;
  border-radius:7px;
  display: table-cell;
  vertical-align: middle;
}
div#div_header_center {
  width: 60%;
  border-radius:7px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
div#div_header_right {
  width: 20%;
  border-radius:7px;
  display: table-cell;
  vertical-align: middle;
}

最后，位于每个子div中的图像就像一个表格单元格应该与div本身分离，并且应该给它们适当的对齐...

img.image_header_left {
  float: left;
}
img.image_header_center {
  text-align: center;
}
img.image_header_right {
  float: right;
}

应用后，dom的源代码如下所示：

<body>
  <div id="div_header_container">
    <div id="div_header_left">
        <img class="image_header_left" src="./Logo_Left.png" alt="Header Left Image" />
    </div>
    <div id="div_header_center">
        <img class="image_header_center" src="./Logo_Center.png" alt="Header Center Image" />
    </div>
    <div id="div_header_right">
        <img class="image_header_right" src="./Logo_Right.png" alt="Header Right Image" />
    </div>
  </div>
</body>

如何让HTML div在水平方向上动态扩展以适应窗口宽度？

2 个答案: