0

N. Sullivan の OOCSS メディア オブジェクトの使用。元の CSS を変更して、オーバーフローの非表示を削除し、micro-clearfix に置き換えました。私が直面している問題は、メディア オブジェクトをネストしようとすると、ネストされたメディア オブジェクトがフロートをクリアしないことです。オーバーフローを回避しようとしています: hidden;

見てみましょう: 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 に答える