我在网页上有两个div,我希望它们都有一个固定的宽度,并希望第一个div浮动到第二个div的左边。
这听起来很简单,我以下Markup和CSS会给我想要的结果:
<div class="left">Content</div>
<div class="right">Content</div>
div.left {
float: left;
width: 200px;
}
div.right {
width: 200px;
这不能按预期工作,而是在下一行显示正确的div,就像它没有浮动一样。在此示例网页中最好地解释了这一点:
我的问题是为什么这不能按预期工作?不是如何修复它。
注意:
答案 0 :(得分:14)
在我看来,这是一个简单的规则,阻止,除非浮动,总是开始一个新的行。 w3.org/TR/CSS2/visuren.html#block-formatting第9.4.1节 -
答案 1 :(得分:1)
div.left {
float: left;
width: 200px;
height:200px;
background:red;
}
div.right {
float:right;
width: 200px;
height:200px;
background:blue;
}
或者,如果你想要它们并排,那么你可以漂浮:左边两个 见http://jsfiddle.net/3kUpF/1/
答案 2 :(得分:1)
浮动元素可以“流入”块元素,占据相同的行,但是将内容(而不是元素本身)推过。在这种情况下,左边是“内部”右边,但是右边的文本没有剩余空间,因此它位于下面。要查看我的意思,请尝试将右边的宽度设置为300px而不是200px - 您应该看到左边的“蓝色边框”,文本在其周围流动。为了“修复”这个问题,我建议给出一个左边的浮动或一个块内联的显示。
答案 3 :(得分:0)
第二个元素应该是内嵌元素。
div.right {
width: 200px;
display: inline;
}
如果您不想将第二个元素设为内联,请将其浮动到左侧。但是你的容器会崩溃。您可以使用clear
:
<div id="container">
<div class="left">Content</div>
<div class="right">Content</div>
<br style="clear:both"/>
</div>
div.left {
float: left;
width: 200px;
border: 1px solid red;
}
div.right {
width: 200px;
border: 1px solid green;
float:left;
}
#container{
border: 1px solid black;
}
请参阅example
答案 4 :(得分:0)
浮动两个div。
应用宽度为正的左边距(div.right),在您的情况下为200px。
应用宽度为负的左边距(div.left)+宽度(div.right),在您的情况下,200px + 200px = 400px。
div.left { float: left; width: 200px; margin-left: 200px; }
div.right { float: left; width: 200px; margin-left: -400px; }
答案 5 :(得分:0)
您可以添加clear:both;
个<p>
代码。那样可以解决问题。不破坏(示例)页面的其余部分。
答案 6 :(得分:0)
如果您希望两个容器彼此浮动,您可以使用span而不是div。这可能会导致问题结束。