代码之家 › 专栏 › 技术社区 › Jess

chrome中的第二个浮动DIV在第一个DIV之前清除

css-float html google-chrome css

Jess · 技术社区 · 17 年前

两个沙发在一起,都漂浮在包装袋里。在IE和Firefox中,它们显示正确,但在Chrome中,第二个浮动的DIV会在DIV A下面清除。当我删除CSS中的“float:left”时,它会在Chrome中转到正确的位置,但在IE和Firefox中会清除(应该如此)。我不知道为什么它会出现在Chrome中。有什么想法吗?

16 回复 | 直到 13 年前

Bryan Migliorisi 17 年前

HTML和CSS将有助于回答这个问题。
如果只有两个div,并且希望它们彼此相邻浮动,那么在每个div上设置一个宽度,然后向左浮动一个,向右浮动另一个。记住要在两者之间留出一些空间。

kolin 13 年前

在我的情况下,我用 display:inline-table 对于浮动元素的父元素..即使不是桌子。

我用过 显示:内联表 为了修复Google Chrome遇到的错误…

Chuck Norris Rohidas Kadam 14 年前

我在Chrome上也有同样的问题,我通过 display:inline-table 母体div

lukaszkups 14 年前

解决方案很简单-只需添加包含所有这些div的div,然后添加一个属性: display: table; -它应该解决这个问题。

kencise 15 年前

我有多个CSS浮动左边,里面有文本链接,容器在每个容器的右边重叠。修复方法是删除链接显示文本中的空间。如。 ...> TEXT </a> 到 ...>TEXT</a>

Apqu 14 年前

你必须给1分高

例如

div 1

.oneColFixCtrHdr #mainContent {
    background: #FFFFFF;
    width: 375px;
    height: 0px; /* deze hoogte op 0 instellen, die bepaal je met de onderstaande div. */
    position: relative;
    display: block;
    float: left;
    padding-left: 10px;
    margin-bottom: 20px;
    padding-bottom: 0px;
    padding-top: 20px;
}

div 2

.oneColFixCtrHdr #maincontent2 {
    background: #FFFFFF;
    width: 390px;
    height: auto;
    position: relative;
    display: inline-block;
    float: right;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 5px;
    padding-bottom: 0px;
    padding-top: 20px;
    padding-left: 20px;
    border-left-style: groove;

Khub Ram 14 年前

在Chrome中,这个问题似乎与显示父元素的属性。我也有同样的问题,做了很多搜索。我终于把它修好了显示父td标记的css属性。我也弃用了一个线状的东西。当我拥有 显示:块; 对于父级td table元素,在chrome中, 科尔斯潘 不起作用(在工作状态良好)。我发现这个问题时弄了很多头发。

Anand Sharma 13 年前

我在DIV和它的子SPAN中都遇到了同样的问题,为了解决这个问题,我只在DIV父级中添加了inline显示,现在它在chrome和safari中都可以正常工作。

Eric Klien 13 年前

我把所有东西都包起来了 <div style="display:inline;"> ... code .. </div> 解决了这个问题。

Dan 17 年前

没有代码示例,这只是猜测
我不确定Chrome是如何工作的,但我知道IE广告有自己的风格。是否使用了CSS重置?大多数跨浏览器问题都可以通过此解决。
听起来两个浮动分隔的组合宽度超过了包装器的宽度。尝试将包装宽度设置为100%或不设置宽度…或者减小两个浮动分隔的宽度。
您是否在任何这些div上设置了任何显示:inline、block等样式属性?

Andy E 17 年前

设置display:inline块和两个div的宽度怎么样?

编辑:如果没有填充/边距设置,那么为每个浏览器设置最大宽度为%50将适用于除IE6之外的所有浏览器。

DenisKolodin 16 年前

我也面临同样的问题。Chrome错误地显示带浮动的div。块显示在第一个块下。我并没有料到。孤独很简单! 用包围两个街区 div 里面没有其他姐妹阻挡 .

Lindes Roets 15 年前

我有一个问题,我有一个container div,它有一堆内部的div,设置了float:left属性。我的最后一个内部分区(最右边)也结束了。我通过确保带边距的组合内部分隔符不超过容器分隔符的宽度来解决我的问题。

Chrome的开发工具类似于Firebug,可以帮助我解决问题。对于container div,我没有显式地设置宽度,但是chrome的开发工具可以显示继承的宽度。然后我看了看所有内部分隔带的宽度,然后调整了一些内部分隔带的宽度。

Michel Joanisse 15 年前

在我的例子中,浮动儿童区也有类似的问题。我将一个环绕的DIV浮动到右侧,其中包含H3元素(具有文本对齐属性)-后跟2个子块元素。

意图使H3文本相对于其下方的子块元素居中。

问题? 我没有一套宽度对于块子元素..为什么?我希望宽度相对于容器中的文本量在左/右保留不同的填充。如。 填料:10px 30px;

解决方案 我试图设置一个宽度的周围和儿童沙发,也中心对齐文本的儿童沙发,以提供类似的结果,第一个案件的尝试。

Andy Brooks 15 年前

我也遇到过同样的问题。我有两个带浮动的div:left在表td中--我必须将表td style设置为包括style=“text-align:left;”,以便它们正确对齐。

vyb 14 年前

我不是HTML英雄,所以在我的情况下,这个问题真的很愚蠢。

只是一个 语法错误 所以在你开始像我一样拔掉头发之前,一定要检查你所有的语法。

而Safari完全忽视了这一点,并且正确地显示了沙发床的浮动,所以我真的很困惑。

基本上是一个未关闭的DIV标记造成了问题:

<div class="seperator" </div>    instead of    <div class="seperator"> </div>