Question

我正在尝试在另一个内部创建两个浮动div：

 <div style="width:100%;height:500px;position:relative;top:15px;">          

        <div style="position:relative;float:left;width:58%;height:100%;left:10px;">
            <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
                <div style="height:30px;text-align:center;position:relative;    "><h2>welcome</h2></div>                
                <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
                <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>               
            </div>
        </div>


   </div>

问题是浮动div1和div2在div的边框之外，ID为“borderdiv”。我做错了什么？

Answer 1

浮动元素没有高度，因此#borderdiv不会展开以包含它们。

您可以使用清除元素来纠正此问题：

<div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>
<div style="clear: both" />

Demo on JSFiddle.net

Answer 2

由于你的问题不是很具体，那我的答案很简单。这只是将div1和div2放在borderdiv中：

<div style="width:100%;height:500px;position:relative;top:15px;">          
    <div style="position:relative;float:left;width:58%;height:100%;left:10px;">
        <div id="borderdiv" style="position:relative;width:92%;top:20px;bottom:20px;left:20px;border:1px solid #000;background-color:gray;">
            <div style="position:relative;width:25%;background-color:green;float:left;">floating div1</div>
            <div style="position:relative;width:25%;background-color:red;float:left;">floating div2</div>               
            <div style="height:30px;text-align:center;position:relative;"><h2>welcome</h2></div>    
        </div>
    </div>
</div>

为什么这些浮动div不能正常显示？

2 个答案: