0

通常、clearfix スタイルを使用してすべてのフローティング関連の問題を修正できますが、これを機能させることはできません。右側の列に clearfix スタイルを追加してみました。別の clearfix div を使用したくありません。

以下のスクリーンショットは、問題を示しているはずです。

http://min.us/leRsoGVqAQtbJ

HTML:

<div class="two-thirds left">

    <!-- Quotes -->
    <div class="notepad">
        <p class="quote">“I have worked [...]</p>
        <span class="who">- Clara Craftsman [...]</span>
    </div><!-- .notebook -->

</div><!-- .two-thirds -->

<div class="one-third right clearfix">
    p>This should be floating to the right of the notepad, but the Work Experience heading should be below.</p>
</div>

CSS:

/* Floates*/
.left { float:left; }
.right { float:right; }

/* Quotes */
.notepad,
.quote,
.who {
    display:block; 
    font-family:"Neucha",cursive;
    font-size:16px;
}
.notepad { 
    width:409px;
    padding-top:25px;
    margin-left:30px;
    background:url(../img/misc/notepad/notepad-top-big.png) no-repeat; 
}
.quote {
    width:315px; /* 409px total */
    padding:0 28px 24px 66px;
    background:url(../img/misc/notepad/notepad-middle-big.png) repeat-y;
}
.who { 
    width:315px; /* 409px total */
    padding:0 28px 48px 66px;
    background:url(../img/misc/notepad/notepad-bottom-big.png) no-repeat;
    text-align:right;
    font-style:italic;
    margin-top:-24px;
}

/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
4

2 に答える 2

3

floatandclearfixを同じ要素に適用することはできません。

ここから、

この問題は、フロート要素がコンテナー ボックス内にある場合に発生します。その要素は、コンテナーの高さをフロート要素に合わせて自動的に調整しません。要素がフロートされると、フロートがフローから削除されるため、その親には要素が含まれなくなります。

clearfix次のように適用する必要があります。

<div class="clearfix">
    <div class="one-third right">
        <p>This should be floating...</p>
    </div>
</div>
于 2013-01-04T10:26:39.470 に答える
2

これは、フロートではなくインラインブロックを使用するソリューションです。これがあなたが探しているものかどうかを確認してください-

デモ

修正されたcss-

#wrapper 
{
   min-width:700px; 
}
.left,.right { display:inline-block; }
.left
{
    width:70%;
    min-width:420px;
}
.right
 {
    width:28%;
    min-width:170px;
 }
于 2013-01-04T10:24:34.213 に答える