Question

我有如下的html布局：

<div id="header"></div> 
<div id="body"></div> 
<div id="footer"></div>

如果标题是固定宽度，我如何强制它伸展以匹配正文的宽度 - 适用于正文比标题宽的情况。

Answer 1

首先，将所有divs封装在父div中。这设置了一个边界，以防止某些divs超出其他人，并使最小宽度的hack更容易使用。

<div id='container'>
  <div id='header'></div>
  <div id='body'></div>
  <div id='footer'></div>
</div>

然后，在CSS中，使用以下min-width hack使最小宽度指令适用于所有浏览器。注释中包含有关其工作原理的详细信息。请注意，当提到IE时，我的意思是IE 6-7，我相信IE 8与所有其他浏览器一样。

#header {
   min-width:800px;   /*minimum width for non-ie browsers, ignored by ie*/
   width: 100% !important; /*width will autoexpand as necassary in non-ie browsers*/
   width: 800px;  /*ie uses width as a min-width by default.*/  
   /*Also IE ignores !important and instead uses the last directive found*/
}

现在当body div扩展到大于标题的大小时，标题将展开以匹配它。

Answer 2

我同意Ian Elliott，我怀疑你并不真的需要它。也许居中会做。

如果您确实需要一种允许标题与后面的内容匹配宽度的工具，则表格就是该工具。具有三个单元格行的表将生成您想要的布局，并且它曾经是布局网站的标准方法。你想要匹配一些旧的布局吗？

拉伸div宽度以匹配另一个

2 个答案: