Question

* NEW UPDATED JSFiddle http://jsfiddle.net/qKP2v/8/ *

我有一个非常简单的布局，分别左右浮动两个侧边栏。中间是#maincontent div，其中包含#content div。这样做的原因是页面上的主要内容可以拉伸以填充浏览器分辨率的大小。

我遇到的问题是当我想插入div（#rectanglebox1, #rectanglebox2, #rectanglebox3）时清除我#content div中的左右浮动。但#rectanglebox div正试图清除对我没有任何意义的侧边栏。 #rectanglebox div位于#content区域内，没有应用浮点数。那么为什么#rectanglebox div被推到侧边栏下面呢？

这是我的HTML：

<div id="wrapper">   
    <div id="maincontent">
        <div id="aside-left">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div> 
        <div id="aside-right">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div>       
        <div id="content">
            <div id="ataglance">
            <div id="rectanglebox1"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
                        <div id="rectanglebox2"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
                        <div id="rectanglebox3"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p></div>
        </div> 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>

这是我的CSS：

#wrapper {
    width:100%;
    margin: 0 auto;
    background-color: #FFF;
    min-height:200px;
    border: 1px solid #F0F;
}
#aside-left {
    height: 400px; /* guess */
    float:left;
    width:100px;
    top: 0;
    left: 0;
    border: 1px solid #9C0;
}
#maincontent {
    border: 1px solid #9C0;
    width:100%;
}
#maincontent #content{
    margin:0 130px;
    border: 1px solid red;
}
#aside-right {
    height: 400px; /* guess */
    float:right;
    width:100px;
    top: 0;
    right: 0;
    text-align: right;
    border: 1px solid #9C0;
}
#ataglance {
    border: 2px solid black;
}
#rectanglebox1 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:200px;
}
#rectanglebox2 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:250px;
}
#rectanglebox3 {
    float:left;
    margin-top:5px;
    border: 1px solid orange;
    width:300px;
}

Answer 1

尝试这段代码，它对我有用！

<div id="wrapper">   
    <div id="maincontent">
        <div id="aside-left">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div> 
        <div id="aside-right">
            <ul>
                <li>Link1</li>
                <li>Link2</li>
                <li>Link3</li>
            </ul>
        </div>       
        <div id="content">
            <div id="rectanglebox"><p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur</p></div>
             <div style="clear:both;"></div>
        </div>  
       <!-- <div style="clear:both;"></div>  no need for this -->
    </div>

</div>

并修改你的css：

#rectanglebox {
    margin-top:30px;
    border: 1px solid orange;  
    float:left;
}

为什么内部div试图清除其他div？

1 个答案: