Clearfixing浮动在容器内但忽略容器外的浮动?

时间:2014-02-23 16:14:34

标签: html css css3 sass clearfix

我有以下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可以解决问题,但我们假设该文章包含应该能够出现在其容器之外的弹出元素?

2 个答案:

答案 0 :(得分:1)

将每篇文章设置为内联块(并赋予其全宽)可能有效:

article {
  display: inline-block;
  width: 100%;
}

http://jsfiddle.net/vKF83/

答案 1 :(得分:0)

Pixel的答案适用于您提供的演示链接:http://sassmeister.com/gist/9173268

只需在文章选择器中放入Sass窗口中的以下内容(不带分号):

display: inline-block
width: 100%

如果你想要在同一个区块内,你也可以指定高度:

height: 300px