Question

每当我创建自己的个人网页时，我总是遇到使用div创建多列布局的问题。我使用float属性将它们对齐到左侧或右侧，但是当我使浏览器窗口变得更加光滑时，列会重新调整一列落在另一列之下的位置，而其他的东西会混乱对齐。我希望这些专栏可以像所有其他网站一样保留。

最好的方法是什么？

Answer 1

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

Answer 2

为什么重新发明轮子？有很多站点提供免费模板，正是您想要实现的目标。检查一下这些：

希望这些可以帮到你！

Answer 3

有几种可能的解释：

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

2）如果您已经使用完全流畅的方法，但使用IE6 / 7进行查看，则可能会遇到某些大小的子像素舍入错误。妮可的方法也解决了这个问题。

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

Answer 4

您可以使用min-width CSS命令指定页面的最小宽度。有关示例，请参阅this page。

Answer 5

您可以使用min-width并使用ie7.js

在IE6中使用它

Answer 6

解决方案是不要将float用于所有内容。当然，您可以购买模板并“外包”问题，但通常使用边距和位置（包括负值）的组合来获得网页的柱状布局。或者 - 当然 - 表，但要注意在使用HTML时丢失HTML的语义值（例如屏幕阅读器和线性解析器会混淆）。

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

Answer 8

我可能会被遗忘为此，但是直到IE6从地球表面消失，使用表格进行多列布局确实是最安全，最简单的方法。当然，这不是“正确”的方式，但在这种情况下，以正确的方式做到这一点的回报是如此微不足道，以至于你可能只是放入一张桌子并转向更重要的事情。

别误会我的意思;我喜欢CSS。我只是认为多列布局的实用选择仍然是表格。您将花费更少的时间与浏览器抗争，并有更多时间专注于真正有益于您的网站消费者的事情。

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

8 个答案: