为什么 "float:left "在固定宽度下不工作?[英] Why `float:left` doesn't work with a fixed width?

本文是小编为大家收集整理的关于为什么 "float:left "在固定宽度下不工作?的处理方法,想解了为什么 "float:left "在固定宽度下不工作?的问题怎么解决?为什么 "float:left "在固定宽度下不工作?问题的解决办法?那么可以参考本文帮助大家快速定位并解决问题。

问题描述

我在一个网页上有两个div,我希望他们两个都有固定宽度,并希望第一个div漂浮在第二个Div的左侧.

这听起来很简单,尽管以下标记和CSS会给我带来理想的结果:

<div class="left">Content</div>
<div class="right">Content</div>

div.left {
    float: left;
    width: 200px;
}

div.right {
    width: 200px;

这不如预期的那样起作用,而是在下一行上出现右DIV,就好像没有漂浮一样.在此示例网页中最好解释:

问题的示例

我的问题是为什么它不按预期工作?不是如何解决.

注意:

  • 请确保您在回答此问题之前完全了解Floats的工作方式.
  • 请确保您查看并理解示例.
  • 这两个元素都必须是阻止的,而不是内联.
  • 我了解所有修复程序/骇客,以进行这项工作.我想知道为什么它不起作用.
  • 这似乎仅在歌剧中正确起作用.
  • 需要用文档备份答案.

推荐答案

在我看来,这是一个简单的规则,除非漂浮,否则始终始终启动一条新线路. w3.org/tr/css2/visuren.html#block-formatting

其他推荐答案

 div.left {
     float: left;
     width: 200px;
    height:200px;
    background:red;
 }

 div.right {
    float:right;
     width: 200px;
     height:200px;
    background:blue;
}

请参阅 http://jsfiddle.net.net/3kupf/

另外,如果您希望它们并排,那么您可以浮动: 参见 http://jsfiddle.net/3kupf/1/

其他推荐答案

浮动元素可以流入"块元素,占据相同的线路,但将内容物(不是元素本身)推开.在这种情况下,左为"内部"右侧,但是右侧没有任何文本的空间,因此它在下面.要看我的意思,请尝试将权利的宽度设置为300px而不是200px-您应该看到左边的蓝色边框"左",文字在其周围流动.为了"修复"此问题,我建议给右侧的左侧或块上的显示.

本文地址:https://www.itbaoku.cn/post/572178.html