クリア：レイアウト

サンプルここでは2列であまりにも貪欲左：http://jsfiddle.net/YUhgb/クリア：レイアウト

HTML

<html> 
    <body> 
     <div class="left"></div> 
     <div class="right"> 
      <div class="container"> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
       <div class="item"></div> 
      </div> 
      <p> 
       After Container 
      </p> 
     </div> 
    </body> 
</html>

CSS

.left{ 
    float: left; 
    width: 150px; 
    height: 700px; 
    background-color:red; 
} 
.right{ 
    margin-left: 160px; 
    background-color:blue; 
} 
.container:after{ 
    content: ""; 
    height: 0; 
    clear: both; 
    display: block; 
} 
.item{ 
    float:left; 
    width: 21%; 
    margin-right: 1%; 
    margin-bottom: 10px; 
    height: 200px; 
    background-color:green; 
}

左の列があまりにもあれば、問題は、あります長いと、浮遊しているコンテンツの下のコンテンツは、左側の下に落ちます。私の例では、緑のボックスのすぐ下にテキストAfter Containerを表示したいと思います。

クリア：leftを適用して、右側の列にのみ影響するようにするにはどうすればよいですか？

出典

2012-04-24 AndrewR

ブロックにdisplay: tableとwidth: 100%;を追加して、クラスをcontainerとしてこの問題を解決できます。ここでの実施例を参照してください：http://jsfiddle.net/skip405/YUhgb/15/

出典

2012-04-24 20:29:23 skip405

初めて私が試したとき、私は水平スクロールバーを得ました。もう一度見て、それは動作しているようです。 – AndrewR

右の列もフロートできますか？

変形例：http://jsfiddle.net/YUhgb/9/

出典

2012-04-24 20:18:28

はい、これだけの作品は、あなたは右の列の幅を設定することができます。 – AndrewR

この全体のCSSブロックの削除：

.container:after{ 
    content: ""; 
    height: 0; 
    clear: both; 
    display: block; 
}

を...と追加：

.container { overflow:auto; }

http://jsfiddle.net/YUhgb/12/

乾杯

出典

2012-04-24 20:19:36 Madbreaks

これは良い答えですが、私の実際のコードでは背景色を持つ '.container'ブロックがいくつかあります。フローティング要素の後にクリアを持たないことは、背景色がコンテナ全体をクリアしない原因となります。それ以外の場合は、コンテンツが正しくレイアウトされます。 – AndrewR

さて、それをあなたの質問に含める必要があります。 – Madbreaks

私はposition: absolute;に.leftにfloat:left;を変更し、私がそれをしたいどのように表示されます。

更新コード：http://jsfiddle.net/YUhgb/17/

出典

2012-04-24 20:43:01 AndrewR

私を許しても、それは良い解決策ではありません。そのページにフッターを追加するとどうなるか見てみましょう：http://jsfiddle.net/skip405/YUhgb/18/絶対的な位置付けは注意深く扱われるべきです:) – skip405

正しいです。私は実際にフッターを持っていますが、今のところ私のために働いています。私の 'After container'はかなり背が高く、右側は常に左よりも長いからです。しかし、私はまだもっと良い解決策を模索すべきです。 – AndrewR

実際に私はより良い解決策を53分前に提案しました）））：http://stackoverflow.com/a/10305534/1144057 – skip405

クリア：レイアウト

答えて

関連する問題