关于 HTML 网页构建中 div 的问题答案

【问题标题】：Question about divs in HTML web page building关于 HTML 网页构建中 div 的问题
【发布时间】：2009-08-28 18:36:28
【问题描述】：

每当我创建自己的个人网页时，我总是遇到使用 div 创建多列布局的问题。我使用 float 属性将它们向左或向右对齐，但是当我使浏览器窗口更窄时，列会重新调整一列低于另一列的位置，而其他事情会导致对齐混乱。我希望这些列像所有其他网站一样保持不变。

最好的方法是什么？

【问题讨论】：

标签： css html

【解决方案1】：

您可以指定列 div 的容器的宽度。

【讨论】：

【解决方案2】：

为什么要重新发明轮子？有很多网站提供免费模板来完全满足您想要实现的目标。检查其中一些：

希望这些对您有所帮助！

【讨论】：

【解决方案3】：

有几种可能的解释：

1) 如果您有一个具有固定宽度列的流体容器，则容器将调整大小并且列将不再适合。您可以为容器添加设置宽度，也可以使列流动（基于百分比）。如果您在此处使用 Nicole Sullivan 的方法，您甚至可以只使其中一列流动：http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

2) 如果您已经在使用完全流畅的方法，但使用 IE6/7 来查看它，您可能会遇到某些尺寸的亚像素舍入错误。 Nicole 的方法也解决了这个问题。

你不需要表格，只需要一点数学。

【讨论】：

【解决方案4】：

您可以使用min-width CSS 命令来指定页面的最小宽度。示例见this page。

【讨论】：

【解决方案5】：

您可以使用min-width 并使用ie7.js 让它在IE6 中工作

【讨论】：

【解决方案6】：

解决方案是不要对所有事情都使用float。当然，您可以购买模板并将问题“外包”，但通常网页的柱状布局是使用边距和位置（包括负值）的组合来实现的。或者 - 当然 - 表格，但是当你使用它们时要小心失去 HTML 的语义价值（例如屏幕阅读器和线性解析器会被混淆）。

【讨论】：

【解决方案7】：

只需为您的元素设置一个明确的宽度。这应该使它们不受任何调整大小的影响。

div.clear  { clear:both; }
#container { width:640px; }
  #nav     { float:left; width:200px; }
  #content { float:left: width:440px; } 

<div id="container">
  <div id="nav">
    <p>Hello World</p>
  </div>
  <div id="content">
    <p>Hello World</p>
  </div>
  <div class="clear"></div>
</div>

【讨论】：

我没有调整大小的问题，是布局在 div 移动的地方自行调整。

【解决方案8】：

我可能会因此而被否决，但在 IE6 从地球表面消失之前，使用表格进行多列布局确实是最安全、最简单的方法。当然，这不是“正确”的做法，但在这种情况下，正确做法的回报是如此微不足道，以至于您还不如坐在桌子上，继续做更重要的事情。

不要误会我的意思；我喜欢 CSS。我只是认为多列布局的务实选择仍然是表格。您将花费更少的时间与浏览器作斗争，而有更多的时间专注于真正有利于您网站的消费者的事情。

【讨论】：

是的，可能最简单的解决方案是最强大的。如果您知道自己在做什么，那么 IE6 真的不难争论。但是学习多写几行代码肯定比放弃更难。
这完全取决于您的目标。我想我倾向于从商业角度写作。我曾经尝试编写完美的基于 CSS 的网站，然后我意识到我浪费了多少时间来获得与 3 列表相同的确切行为。除非有很好的商业理由避免使用桌子，否则现在我只是使用它并原谅自己。