13

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

4

16 回答 16

8

  1. HTML 和 CSS 将有助于回答这个问题。

  2. 如果您只有两个 div，并且希望它们彼此相邻浮动，则在每个 div 上设置一个宽度，让一个向左浮动，另一个向右浮动。记得在两者之间留一些空间。

于 2009-06-18T14:44:58.307 回答
6

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

我使用它display:inline-table来修复谷歌浏览器遇到的错误..

于 2013-01-16T09:12:03.837 回答
2

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

于 2012-08-30T09:41:36.347 回答
2

我在 Chrome 中遇到了同样的问题，我通过给display:inline-table父 div 来解决它

于 2011-12-16T14:55:06.283 回答
1

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

于 2010-11-28T23:44:32.510 回答
1

你必须给 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;
}

第 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;
于 2011-10-05T15:38:42.173 回答
1

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

于 2013-05-25T08:18:32.163 回答
1

我在使用 Div 时遇到了同样的问题，它的 Children Span 都具有正确的浮动，为了解决我刚刚将显示内联添加到 Div 父级，现在它在 Chrome 和 Safari 中都可以正常工作。

于 2013-01-25T01:44:51.563 回答
1

在 Chrome 中 - 似乎这个问题与父元素的显示属性有关。我有同样的问题并且做了很多搜索。最后我通过删除父 TD 标记的显示CSS 属性来修复它。我还观察到一件奇怪的事情。当我有display:block; 对于 TD 表元素的父级，在 Chrome 中，colspan不起作用（在 IE 中它工作正常）。我抓了很多头发发现这个问题。

于 2011-12-29T21:46:29.267 回答
0

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

于 2011-09-02T17:41:05.753 回答
0

我有一个问题，我有一个容器 div，里面有一堆内部 div，这些 div 设置了 float:left 属性。我的最后一个内部 div（最右边）也结束了。我通过确保带有边距的组合内部 div 不超过容器 div 的宽度来解决我的问题。

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

于 2010-09-09T19:05:35.937 回答
0

浮动子div也有类似的问题。在我的情况下..我将一个周围的 div 浮动到右侧，其中包含 h3 元素（具有 text-align 属性） - 后跟 2 个子块元素。

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

-

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

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

于 2011-04-15T17:28:50.983 回答
0

我遇到了同样的问题。Chrome 错误地显示带有浮动的 div。该块显示在第一个下方。不谈我的预期。解决方案很简单！用div包围两个块，其中没有任何其他姐妹块。

于 2010-05-05T10:04:55.753 回答
0

  1. 没有代码示例，这真的只是猜测

  2. 我不确定 Chrome 是如何工作的，但我知道 IE 广告有自己的风格。你用了css重置吗？大多数跨浏览器问题都可以通过这个解决。

  3. 听起来 2 个浮动 div 的组合宽度超过了包装器的宽度。尝试将包装器宽度设置为 100% 或无宽度...或减小两个浮动 div 的宽度。

  4. 您是否在这些 div 中设置了任何 display: inline、block 等样式属性？

于 2009-06-18T14:49:38.937 回答
0

如何设置 display:inline-block 和两个 div 的宽度？

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

于 2009-06-18T14:50:36.753 回答
0

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

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

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

基本上，这是一个未封闭的 div 标签，它造成了问题：

<div class="seperator" </div>    instead of    <div class="seperator"> </div>
于 2012-06-04T16:02:47.897 回答