首先,还应清除容器(在您的情况下为.wrap)以用于浮动.这是关于“clearfix”的一个很好的Stackoverflow问题. “Clearfix-ing”将确保容器高度伸展以匹配最长的浮动柱.用于做“人造柱”设计.

What methods of ‘clearfix’ can I use?

其次,需要知道你想要做多少列？ 2列？ 3列？

皮肤有不同的方法.您可以执行2列,然后将其中一列再细分为另外两列布局.或者您可以放置​​3个块容器并将每个容器浮动到总宽度的百分比. IE浏览器.对于3列布局,理论上您希望每个布局宽度为33.33％(取决于您想要如何做到装订线或边距).

第三,你谈到“灵活布局”.好吧,灵活的布局不能用于像素宽度,因为像素是静态值. IE浏览器.如果你说宽度是200px,它总是200px,无论你的容器或窗口有多大或多小.

你需要做的是使用百分比.当然,要进行正确灵活的布局,您需要具有基本尺寸.所以,你需要有一个固定的设计,你会说是你的“最佳设计”(我必须松散地使用这个术语,因为真正的灵活和响应式设计应该在大多数情况下看起来很好).

所以,假设您的设计设置为主内容区域.wrap为1000px.您需要使用黄金比例的2列布局. http://en.wikipedia.org/wiki/Golden_ratio

基本上,您希望一列为618px,另一列为1000px – 618px = 382px.

对于CSS,您需要根据百分比来设置它们.要获得百分比,请获取父宽度并将其除以所需宽度.

618px / 1000px = .618 * 100(百分比)= 61.8％

382px / 1000px = .382 * 100(百分比)= 38.2％

.left {
    float: left;
    width: 61.8%
}

.right {
    float: right;
    width: 38.2%
}

约瑟夫西尔伯是正确的,你不需要浮动右列,但不这样做可能导致其他意外的问题,如框模型的行为和包裹浮动的左项目,特别是如果一个比另一个短.

你可以应用一个余量来将一列偏移到另一列宽度,但我发现它只是凌乱而且浏览器中的CSS实现可能仍然存在问题(就像我说的那样我不再支持IE6了,它仍然是我们的访客使用它足以支持它).

另请注意,处理％时会遇到舍入错误.某些浏览器在达到“.5％”时会向下或向上舍入.这可能会导致浮动列换行,因为它比容器元素大1px.因此,为了安全起见,您可能希望剃掉一点宽度,以便为包装提供1-2px的缓冲区.

一种常见的方法是在左侧和右侧列之间给出一个“空”的沟槽或边距,例如10px.我们的设计中10px是：

10px / 1000px = 0.01 * 100(百分比)= 1％

您现在可以从每列减去0.5％的折扣,或者从一列中减去1％的折扣.我稍后会做的.

.left {
    float: left;
    width: 60.8% /* removed 1% to give a gutter between columns */
}

.right {
    float: right;
    width: 38.2%
}

这现在为您提供了一个很好的安全区域,您将避免舍入错误.

此外,现在我们正在使用％,布局将是流动的.您的2列将使用浏览器重新调整大小,直到达到最小/最大像素值.

另外,别忘了“clearfix”