Question

浮点div有一个问题。我想将所有div设置为float：left并在屏幕的同一行显示所有div：

Example
A - div a "style=float:left"
B - div b "style=float:left"
C - div c "style=float:left"

As appeared on screen:

A  |  B  |   C


However, when contents in C is overflowing, it end up in the next row like this

A   |   B
C

我是否知道如何将div C重新设置为与div A和B相同的行，而不管C中的内容有多大？我知道C在下一行，因为宽度比前一行可以包含的宽。无论C中的内容有多大，我们如何使div C与A和B显示为同一行？对于我的情况，div C没有固定的宽度，我也不打算设置最大宽度。但A和B有固定的宽度。

谢谢。

Answer 1

如果C没有固定的，你不能只使用浮点数。但是，你应该能够通过不在C上设置浮点数并给它一个等于A + B宽度的余量来完成你想要的。

通过给C左边距，它将出现在A和B的右边（因为那里有可用的空间），并且因为你没有为它指定任何宽度，它将占用剩余的空间。作为奖励，如果C增长高于A＆amp; B，它不会将内容移到其他框下面。

Answer 2

我想我会使用绝对定位。

<html>
<head>
<style type="text/css">
div.outer { position: relative; width: 100%; }
div.inner { position: absolute; }
div.a { left: 0; }
div.b { left: 1em; }
div.c { left: 2em; }
}
</style>
</head>
<body>
<div class="outer">
<div class="inner a">A</div>
<div class="inner b">B</div>
<div class="inner c">C Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Duis lacinia elit sed sapien sollicitudin vitae laoreet lectus hendrerit. 
Donec id lorem mi, vitae feugiat purus. Phasellus cursus, est et sodales 
ornare, lorem magna convallis felis, ac pharetra sem nisl vitae massa. 
Pellentesque habitant morbi tristique senectus et netus et malesuada 
fames ac turpis egestas. Morbi at lectus ac nulla vestibulum tincidunt 
quis vel neque. Pellentesque ultricies, ipsum nec congue placerat, tortor 
enim tempor risus, viverra rutrum eros arcu non orci. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec 
ligula neque, lacinia in sodales vitae, aliquet at diam. Ut sed semper 
ligula.</div>
</div>
</body>
</html>

...产生如下输出： Image of output

Answer 3

从div C中删除float: left声明并添加margin-left: (width of A + width of B) px声明。有关演示，请参阅此fiddle。

CSS中的DIV宽度浮动问题

3 个答案: