浮动div中的文字 [英] Text in floated div
问题描述
情况是：
HTML：
<div id="main">
<div id="a"></div>
<div id="b">Some Text</div>
</div>
CSS：
#a{
float:left;
width:800px;
height:150px;
background-color:#CCC;
}
#b{
width:1000px;
height:100px;
background-color:#9CC;
}
结果：
为什么文本不显示在 div＃a 后面？为什么某些文本的行为就像 div＃a 仍在常规流程中一样？如何强制文本按预期方式工作（在div＃a下）？
Why doesn't the text go behind div#a ? Why does "Some Text" behave as if div#a is still in the normal flow? How to force the text to act as expected (to go under div#a) ?
更新：
当我指的是下时，我指的是Z轴下，而不是Y上。div应当保持不变在这个位置上，唯一需要移动的部分就是文本。
UPDATE: When I mean under, I mean beneath on the Z axis, not on the Y. The div's should stay in this position, the only part that needs moving is the text.
推荐答案
http://www.w3.org/wiki/CSS/Properties/float
•left
元素生成一个浮动在左侧的块框。
内容从顶部开始在框的右侧。
• left
The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top.
因此，如果需要分层效果，请使用CSS声明来正确提供它：位置
Thus, if you want a 'layered' effect, use a CSS declaration that will provide it properly: position
注意：请保留 #a 定位到其父级，而不是< body> ：
Note: to keep #a positioned to it's parent, rather than <body>:
#main { position:relative }
#a { position:absolute }
这篇关于浮动div中的文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
