css - 响应式设计和 clearfix

Question

我有一个页面的响应式布局。<aside>是具有恒定宽度的并且该区域.main具有margin-right。我这样做是因为我希望该.main区域能够适应不同的设备，同时<aside>保持不变。

http://jsfiddle.net/c6mZN/1/

如您所见，问题在于我在主区域内有一个也使用 clearfix 的对象列表，并且第一个元素一直清除对象，直到侧边栏结束。我想要的是它看起来和其他的完全一样.block

我怎么能做到这一点？

Answer 1

用固定代码分叉你的小提琴。

您的.main元素需要知道它有一个单独的“格式化上下文”，以便其子元素可以忽略外部布局流：在符合标准的浏览器中执行此操作的唯一方法是overflow: hidden：

.main {
    overflow: hidden;
}

顺便说一句，你可以去掉边距.main，它会自动占据剩下的任何空间（这样你就可以根据需要改变宽度aside，甚至添加额外的列）——然后我给了aside margin-left: 10px它来决定它的间隙需要保持布局不变。