jquery - css clear floats with multiple divs

Question

我需要清除左右div之后的 float ..即；左边的 div 应该匹配右边的 div 的整个大小..但不幸的是我没有看到它工作。

CSS

#left{
    float:left;
    background-color:gray
}

#right{
    float:left;
    background-color:gray
}

html

<div>

    <div id="left">
       <ul id="ul1" style="list-style-type:none">
          <li><a style="color:orange" href="/">About Us</a></li>
                        <br>
          <li><a style="color:orange" href="/players">Players</a></li>
                        <br>
         <li><a style="color:orange" href="/contactus">Contact Us</a></li>
        </ul>

    </div>

    <div id="right">
        THis is some content.
        <br>
        THis is some content.
            <br>
        THis is some content.
                <br>
        THis is some content.
                    <br>
        THis is some content.
                        <br>
        THis is some content.

                            <br>
        THis is some content.
                                <br>
        THis is some content.
                                    <br>
        THis is some content.<br>
        THis is some content.
    </div>
     <div style="clear: both;"></div>
</div>
                                     <div style="clear: both;"></div>
<div>
</div>    

http://jsfiddle.net/verja6oh/

Answer 1

有一个非常酷的技巧可以做到这一点。

首先，您将 padding-bottom:100%; 应用于每个 div。

接下来，您将 margin-bottom:-100%; 应用于每个 div。

最后，将 overflow:hidden; 添加到它们所在的 div 中。

急!真正的幸福属于你。

jsFiddle Demo

CSS:

#top{background:yellow;overflow:hidden;}
#left{float:left;background-color:gray;padding-bottom:100%;margin-bottom:-100%;}
#right{float:left;background-color:gray;padding-bottom:100%;margin-bottom:-100%;}

请注意，我向容器 div 添加了一个 ID，以便对其进行样式设置。

引用资料:

http://www.ejeliot.com/blog/61