0

初めてレスポンシブ レイアウトを作成していて、css と clearfix で問題が発生しています。作成したコードの問題を示すJS フィドル ( http://jsfiddle.net/brandrally/GFXP9/1/ ) を作成しました。

基本的には、'Line 1' と 'Line 2' をスペースなしで互いの下に配置したいだけです。.line div 内にかなりの数の div を配置する予定であるため、それらを clearfix する必要があると考えています。

CSS

div#content {max-width: 400px; min-width: 300px; margin:0 auto; }
div#left {width: 100px; background:#CCC;  float: left; }
.line {border-bottom: 1px solid #000;}
div#right {background:#F63; margin-left: 100px;}

/* Clearfix */
.CF:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.CF { display:inline-block; }
/* IE mac \*/
.CF { display:block; }

HTML

<div id="content" class="CF">

<div id="left" class="CF">
    Left Content <br/>
    Displayed<br/>
    Demo<br/>
    Problem.
</div>

<div id="right" class="CF">
    <div class="CF line"> Line 1</div>
    <div class="CF line"> Line 2</div>
    <div class="CF line"> Line 3</div>
</div>

</div>
4

1 に答える 1

1

.CF:after from でのクリアを避けたい場合は、#leftto を追加する必要がありoverflow:hidden;ます.CF。

.CF仕事をするので、clearfix pseudoは必要ありませんoverflow。

http://jsfiddle.net/GFXP9/5/

于 2014-01-13T02:38:09.360 に答える