Question

我有一个主要的div，在里面..我有3个div

在普通视图中它工作完美我需要完全相同但由于某种原因如果我调整我的浏览器右侧的一个div将浮动我想出它的原因但我不知道如何解决它。向下漂移div是由于我给div的边界，但我给了边界完美的计算，但我不知道为什么它仍然发生

HTML

<div class="box">
    <div class="box_top"></div>
    <div class="box_left"></div>
    <div class="box_right"></div>
</div>

CSS

.box{
    width:500px;
    height:300px;
}
.box_top{
    width:500px;
    height:49px;
    border-bottom:rgb(239,239,239) 1px solid;
    background-color:#636;
}
.box_left{
    width: 249px;
    height: 250px;
    float:left;
    background-color: #093;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: #FFF;   
}
.box_right{
    width:250px;
    height:250px;
    float:left;
    background-color:#006;
}

请听取问题：http://jsfiddle.net/gtczu/

Answer 1

将min-width: 500px;添加到.box，当浏览器窗口小于500像素时，将显示水平滚动条。

检查updated Fiddle

Answer 2

这是因为你没有在容器上设置宽度而向左浮动。我会在包含div上设置最小宽度或宽度。

Answer 3

这是因为调整大小时所有内部div的总宽度都大于视图端口大小....这就是为什么最后一个div在resized.try时向下浮动以表示所有宽度的百分比...认为这个技巧可能有用

调整页面大小时，浮动div会降低

3 个答案: