0

我正在创建我的第一个真正的响应式布局，并在使用 css 和 clearfix 时遇到了困难。我做了一个 JS fiddle ( http://jsfiddle.net/brandrally/GFXP9/1/ ) 演示了我创建的代码的问题。

基本上，我只希望“第 1 行”和“第 2 行”位于彼此下方而没有空间。我计划在 .line div 中放置很多 div，因此我认为我需要清除它们。

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清除，则#left需要添加overflow:hidden;到.CF.

.CF不需要 clearfix 伪，因为overflow会完成这项工作。

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

于 2014-01-13T02:38:09.360 回答