我有以下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使其增长与侧边栏一样高。但我只希望它像图像一样高。
PS overflow: hidden
可以解决问题,但我们假设该文章包含应该能够出现在其容器之外的弹出元素?
答案 0 :(得分:1)
答案 1 :(得分:0)
Pixel的答案适用于您提供的演示链接:http://sassmeister.com/gist/9173268
只需在文章选择器中放入Sass窗口中的以下内容(不带分号):
display: inline-block
width: 100%
如果你想要在同一个区块内,你也可以指定高度:
height: 300px