html - Clearfixing 在容器内浮动但忽略容器外的浮动？

Question

我有以下 HTML 结构：

%aside.sidebar

%main

  %article
    %h2
    %aside.picture
      %img
    %p

  %article
    %h2
    %aside.picture
      %img
    %p

（如果你不熟悉 HAML：上面的结构代表一棵 HTML 树。%aside.picture意思是<aside class='picture'>。）

侧边栏很高，向左浮动。

在文章中，图像也向左浮动。

我想以这样的方式清除文章，使每篇文章的高度都增长到其图像的底部，但不会增长到侧边栏的底部。

请注意，第一篇文章的 clearfix 使其与侧边栏一样高。但我只希望它长得和图像一样高。

PS overflow: hidden可以解决问题，但是让我们假设文章包含应该能够出现在其容器之外的弹出元素？

score 1 · Accepted Answer

将每篇文章设置为 inline-block （并赋予其全宽）可能会起作用：

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

score 0 · Accepted Answer

Pixel 的答案在您提供的演示链接中有效：http ://sassmeister.com/gist/9173268

只需在您的 Sass 窗口中的文章选择器中输入以下内容（不带分号）：

display: inline-block
width: 100%

当然，如果您想在同一块内指定高度，您也可以指定高度：

height: 300px

2 回答 2