我有以下 HTML 结构:
%aside.sidebar
%main
%article
%h2
%aside.picture
%img
%p
%article
%h2
%aside.picture
%img
%p
(如果您不熟悉 HAML:上面的结构表示一个 HTML 树。%aside.picture
表示 <aside class='picture'>
。)
侧边栏很高并且向左浮动。
在文章中,图片也会向左浮动。
我想以这样的方式清除文章,使每篇文章的高度增长到其图像的底部,但不会增长到侧边栏的底部。
请看演示:http://sassmeister.com/gist/9173268
请注意,第一篇文章的 clearfix 使其与侧边栏一样高。但我只希望它长得和图像一样高。
附言 overflow: hidden
这样做的技巧,但让我们假设文章包含应该能够出现在其容器之外的弹出元素?
最佳答案
将每篇文章设置为内联 block (并赋予其全宽)可能会起作用:
article {
display: inline-block;
width: 100%;
}
关于html - Clearfixing 漂浮在容器内但忽略漂浮在容器外?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21970795/