0

使用 N. Sullivan 的 OOCSS 媒体对象。我修改了原始的 css 以删除隐藏的溢出并用 micro-clearfix 替换它。我遇到的问题是当我尝试嵌套媒体对象时，嵌套的媒体对象不会清除它的浮动。我试图避免溢出：隐藏；

看看：http ://codepen.io/anon/pen/kDpLr

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Media Object</title>
    </head>
    <body>

        <div class="media">

          <a href="http://twitter.com/stubbornella" class="img">
            <img src="http://stubbornella.com/profile_image.jpg" height="200" width="200" alt="me" />
          </a>

          <div class="bd">
            Here is some text inside the media object. Here is some text inside the media object.
          </div>

        </div>

        <div class="media">

          <a href="http://twitter.com/stubbornella" class="img">
            <img src="http://stubbornella.com/profile_image.jpg" alt="me" height="200" width="200" />
          </a>

          <div class="bd">
            <h2>Headline</h2>
            <p>Here is some text inside the media object. Here is some text inside the media object. Here is some text inside the media object.</p>
            <div class="media">

                  <a href="http://twitter.com/stubbornella" class="img">
                    <img src="http://stubbornella.com/profile_image.jpg" alt="me" />
                  </a>

                  <div class="bd">
                    Here is some text inside the media object.
                  </div>

                </div>
          </div>

        </div>
    </body>
</html>

/* ====== media ====== */
.media {
    margin:10px;
    border: 1px solid red;
    @extend %clearfix;
}

.bd {
  @extend %clearfix;
}

.media .img {
    float: left; 
    margin-right: 10px;
  border: 1px solid #ddd;
}

.media .img img {
    display:block;
}

.media .img-right {
    @extend %clearfix;
    float:right; 
    margin-left: 10px;
}

%clearfix {
    &:before,  
    &:after {  
        content: " ";  
        display: table;  
    }  
    &:after {  
        clear: both;  
    }  
}
4

1 回答 1

1

您没有正确清除浮动 - 使用 clearfix 只能确保.media元素延伸到其浮动子元素的位置，因此与overflow: hidden.

您只需要添加clear: both到.media选择器本身（而不是伪 :before 或 :after 元素），然后您将解决问题。

于 2013-02-25T00:48:10.740 回答