Question

我有两个带浮动的div：留在一个宽度固定的容器里面 - 就像那样

<div style="width:1100px">
<div id="A" style="float:left; width: 400px"></div>
<div id="B" style="float:left; min-width: 600px"></div>
</div>

这是问题所在。内部div A和B都是动态生成的，div B可以超过700px。在这种情况下，它低于div A.我不能轻易改变容器的宽度，因为它也是由bootstrap自动生成的。

我尝试过使用溢出选项，但它没有用。我可以根据div和A的总宽度使用jquery动态重新计算容器的宽度，但它会过度。

迫使div B留在div A 旁边的最简单的方法是什么？？

由于

Answer 1

我能想到的一种方法是使用绝对定位。

<div id="container">
    <div id="A">a</div>
    <div id="B">b</div>
</div>

#container {
    width: 1100px;
    position: relative;
    overflow: auto; /* or hidden if you dont want the scrool bar */
}
#A {
    background: yellow;
    width: 400px;
}
#B {
    position: absolute;
    top: 0;
    left: 400px;  /* width of #A */
    width: 900px;
    background: blue;
}

FIDDLE

Answer 2

喜欢我的评论和使用akinuri修改的小提琴，使用百分比和没有滚动条;

#container {
    width: 1100px;
    position: relative;
    overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
     background: yellow;
     width: 60%;
}
#B {
     position: absolute;
     top: 0;
     left: 60%;  /* width of #A */
     width: 80%;
     background: blue;
}

你得到了

http://jsfiddle.net/TRFmL/1/

修改

我想现在我想要你了：

#container {
    width: 100%;
    position: relative;
    overflow: show; /* or hidden if you dont want the scrool bar */
}
#A {
    float:left;
    display:inline-block;
    background: yellow;
    width: 60%;
}
#B {
    float: right;
    margin-right: -40%; // this is the result of 100 - (A+B)
    display:inline-block;
    width: 80%;
    background: blue;
}

Answer 3

您可以使用inline-block显示div，然后将white-space设置为nowrap并删除两个div之间的任何空格。

实例：http://jsfiddle.net/VMVAb/

如何使用float：left强制div溢出

3 个答案: