Question

我正在创建我的第一个真正的响应式布局，并遇到css＆amp; amp; clearfix。我制作了一个JS小提琴（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>

Answer 1

如果您希望避免使用以下内容清除.CF：#left之后，您需要将overflow:hidden;添加到.CF。

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

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

在Clearfix上有CSS问题的响应式布局

1 个答案: