我该如何修改：
<div style="border: solid 1px red; text-align: center">
<div style="background-color: yellow; float: left">left</div>
middle
<div style="float:right; background-color: yellow">right</div>
</div>
所以“右”与“左”垂直排列？
这是我的坏css看起来像渲染：
left middle
right
谢谢！
解决方法
如果您使用’float：right’,请将其作为第一件事：
<div style="border: solid 1px red; text-align: center">
<div style="float:right; background-color: yellow">right</div>
<div style="background-color: yellow; float: left">left</div>
middle
</div>
否则它总是落入下一个文本行.
but why!!!!!
(1)因为一旦你开始在一条线上放置静态文本,你就会有一个不确定的宽度来适应浮动元素.说你写道：
abc abc abc <div style="float: left">xyz xyz</div> abc abc abc
现在假设您开始调整窗口的大小,以便“abc abc abc”恰好适合第一行.现在你遇到一个浮点数,并尝试将它包含在你所在的行上.但它不合适：为了适应它,你必须在线上有“abc xyz xyz”,将剩下的“abc”回到下一行.但！现在你已经将浮动的插入点向下移动了一条线,因此浮动也必须下降一条直线.但！现在第一行没有正确包装,因为有三个“abc”的空间,但该行已经提前结束,以便为实际发生在页面下方的浮动让路…
CSS标准通过在等待下一行之前在具有内联文本的行上创建浮点来解决这种逻辑僵局.
(2)因为这就是Netscape所做的< img float =“right”>许多年前.
