Question

两个div在彼此旁边，两个div都在包装器中左移。在IE和Firefox中它们显示正确，但在Chrome中，第二个浮动div在Div A下方清除。当我在css中删除“float：left”时，它会在Chrome中找到正确的位置，但在IE和Firefox中清除（正如它应该）。我不知道为什么它会在Chrome中以这种方式出现。有什么想法吗？

Answer 1

HTML和CSS对回答这个问题非常有用。
如果你只有两个div并希望它们彼此相邻浮动，那么在每个div上设置一个宽度并向左浮动一个并向右浮动另一个。记得在两者之间留一些空间。

Answer 2

在我的情况下，我使用display:inline-table作为浮动元素的父元素..即使它不是表格。

我使用display:inline-table来修复Google Chrome遇到的错误。

Answer 3

我在Chrome中遇到同样的问题，我通过将display:inline-table提供给父div

来解决这个问题

Answer 4

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

Answer 5

我有多个css float left divs，里面有文本链接，容器重叠在每个文件的右边。修复是删除链接显示文本中的空格。例如。 ...> TEXT </a>至...>TEXT</a>

Answer 6

你必须给高度1 div

例如

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;

Answer 7

在Chrome中 - 似乎此问题与父元素的 display 属性有关。我有同样的问题，做了很多搜索。最后我通过删除父TD标签的 display CSS属性来修复它。我也忽略了一件事情。当我有显示：阻止; 为父级TD表元素时，在Chrome中， colspan 无效（在IE中它工作正常）。我抓了很多头发发现了这个问题。

Answer 8

我遇到了与Div相同的问题，它的儿童跨度都浮动正确，为了解决我只是在Div父级中添加了显示内联，现在它在Chrome和Safari中都运行良好。

Answer 9

我将所有内容都包裹在<div style="display:inline;"> ... code .. </div>中并解决了问题。

Answer 10

没有代码示例，这只是猜测
我不确定Chrome是如何运作的，但我确实知道IE广告有自己的风格。你用css重置了吗？大多数跨浏览器问题可由此修复。
听起来两个浮动div的组合宽度超过了包装器的宽度。尝试将包装宽度设置为100％或无宽度...或减小两个浮动div的宽度。
你有任何显示：在任何这些div上设置内联，块等样式属性？

Answer 11

如何设置显示：内联块和两个div的宽度？

编辑：设置每个浏览器的最大宽度％50将适用于除IE6之外的所有浏览器，假设没有填充/边距设置。

Answer 12

我遇到了同样的问题。 Chrome错误地显示带浮动的div。该块显示在第一个下面。不是我的预期。 Solition很简单！ 使用 div 围绕两个块，其中没有任何其他姐妹阻挡。

Answer 13

我遇到了一个问题，我有一个带有一堆内部div的容器div，它们具有float：left属性集。我的最后一个内部div（最右边）也被包裹了下来。我通过确保带边距的组合内部div不超过容器div的宽度来解决我的问题。

Chrome的开发者工具类似于firebug，非常适合帮助我解决问题。对于我的容器div，我没有明确设置宽度，但chrome的开发人员工具可以显示继承的宽度。然后我查看了内部div的所有宽度，然后调整了一些内部div的宽度。

Answer 14

浮动子div也有类似的问题。在我的情况下..我正在向右移动一个包围h3元素（带有text-align属性）的周围div，后跟2个子块元素。

意图中心h3文本，与其下方的子块元素相关。

-

问题？我没有阻止子元素的宽度 ..为什么？我希望宽度相对于该容器中的文本量左/右保持不同的填充。例如。 填充：10px 30px;

解决方案我使用宽度设置为周围和子div，同时在子div上居中对齐文本，以提供类似第一次尝试的结果。

Answer 15

我遇到了同样的问题。我有两个带浮动的div：留在一个表td中 - 我必须将表td样式设置为包含style =“text-align：left;”让他们正确对齐。

Answer 16

我不是HTML英雄，所以在我的情况下问题真的很傻。

这只是一个语法错误所以请确保在开始拔出头发之前检查所有语法。

SAFARI完全无视它并显示正确浮动的div，所以我真的很困惑。

基本上它是一个未封闭的div标签，它正在创建问题：

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

镀铬中的第二个浮动div在第一个div之前清除

16 个答案: