Question

我需要在左右两侧之后清除浮点数。 left 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中。

的Presto！真正的幸福是你的。

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

Answer 2

这是你可以尝试的东西

<div id="Column">
<p> Content </P
</div>

<div id="Column1">
<p> Content </P
</div>

使用CSS将列浮动到左侧。而column1在右边。将宽度属性设置为50％。

Answer 3

您可以将display属性设置为table-cell（您将隐式获取表格行和表格周围的表格）

#left{
    display: table-cell;
    background-color:gray
}

#right{
    display: table-cell;
    background-color:gray
}

css clear浮动有多个div

3 个答案: