html – CSS:三列布局问题

发布时间:2019-06-12 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了html – CSS:三列布局问题脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我该如何修改:
<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”>许多年前.

总结

以上是脚本之家为你收集整理的html – CSS:三列布局问题全部内容,希望文章能够帮你解决html – CSS:三列布局问题所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: