当前位置： 文江博客话题详情

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

发布于 2024-07-25 02:33:12 字数 199 浏览 5 评论 0原文

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

原文

Two divs are next to eachother, both floating left within a wrapper. In IE and firefox they appear correctly, but in Chrome, the 2nd floating div clears down below Div A. When I remove "float:left" in the css, it goes to the correct position in Chrome, but clears down in IE and firefox (as it should). I dont know why it is appearing this way in Chrome. Any ideas?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（16）

那一片橙海， 2024-08-01 02:33:12

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

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

  1. The HTML and CSS would be useful to answer this.

  2. If you have just two divs and you want them to float next to one another, then set a width on each of them and float one left and float the other right. Remember to leave some space in between the two.

回复 原文
千仐 2024-08-01 02:33:12

就我而言，我使用 display:inline-table 作为浮动元素的父元素。即使它不是表格。

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

in my case i use display:inline-table for the parent element of the floated elements.. Even if it is not a table.

I used the display:inline-table in order to fix the bug that google chrome had encountered..

回复 原文
白云悠悠 2024-08-01 02:33:12

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

I've same issue in Chrome and I solve it by giving display:inline-table to parent div

回复 原文
后eg是否自 2024-08-01 02:33:12

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

The solution is simple - just add the div which contains all these divs an attribute: display: table; - it should solve the problem.

回复 原文
风情万种。 2024-08-01 02:33:12

我有多个 css float left div，里面有文本链接，并且容器重叠在每个 div 的右侧。 修复方法是删除链接显示文本中的空格。 例如。 <代码>...> TEXT 到 ...>TEXT

I had multiple css float left divs with text links inside and the container was over lapping on the right of each. The fix was to remove space in the link display text. eg. ...> TEXT </a> to ...>TEXT</a>

回复 原文
楠木可依 2024-08-01 02:33:12

您必须为 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;

You must give 1 div the height

For example

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;
回复 原文
往事风中埋 2024-08-01 02:33:12

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

In Chrome - Seems this issue has something to do with display attribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing display CSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block; for parent a TD table element, in Chrome, colspan was not working (in IE it was working fine). I scratched my lots of hairs finding this problem.

回复 原文
思念满溢 2024-08-01 02:33:12

我遇到了同样的问题，Div 及其 Children Span 都具有浮动权，为了解决这个问题，我只是将内联显示添加到 Div 父级，现在它在 Chrome 和 Safari 中都可以正常工作。

I faced the same problem with Div and its Children Span both had float right, to solve i just added display inline to the Div parent and now it works fine in Chrome and Safari both.

回复 原文
怼怹恏 2024-08-01 02:33:12

我将所有内容都包裹在

中 ...代码..

并解决了问题。

I wrapped everything in <div style="display:inline;"> ... code .. </div> and solved the problem.

回复 原文
回忆那么伤 2024-08-01 02:33:12

  1. 没有代码示例，这实际上只是猜测

  2. 我不确定 Chrome 是如何工作的，但我确实知道 IE 会广告自己的样式。 你使用了CSS重置吗？ 大多数跨浏览器问题都可以通过此解决。

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

  4. 您是否在这些 div 上设置了任何显示：内联、块等样式属性？

  1. Without a code example this really is just guessing

  2. I am not sure how Chrome works but I do know IE ads its own styles. Did you use a css reset? most cross browser issues can be fixed by this.

  3. Sounds like the combined width of the 2 floating divs exceeds the width of the wrapper. Try setting the wrapper width to 100% or no width... or reducing the width of the two floating divs.

  4. do you have any display: inline, block etc style properties set on any of those divs?

回复 原文
怪我太投入 2024-08-01 02:33:12

设置 display:inline-block 和两个 div 的宽度怎么样？

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

What about setting display:inline-block and the width for both divs?

EDIT: Setting a max-width of %50 for each one would work in all browsers except IE6, assuming there's no padding/margin set.

回复 原文
恏ㄋ傷疤忘ㄋ疼 2024-08-01 02:33:12

我也遇到过同样的问题。 Chrome 错误地显示带有浮动的 div。 该块显示在第一个块下方。 不排除我的预期。
孤独很简单！ 用div包围两个块，内部没有任何其他姐妹块。

I've faced with the same problem. Chrome incorrectly displays divs with float. The block is displayed under the first. Not aside how I expected.
Solition is simple! Surround both blocks with div that no any other sisterly blocks inside.

回复 原文
战皆罪 2024-08-01 02:33:12

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

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

I had a problem where I had a container div with a bunch of inner divs that had the float:left property set. My last inner div (most right) also wrapped down.
I fixed my problem by making sure that the combined inner divs with margins does not exceed the width of the container div.

Chrome's developer tool similar to firebug was great in helping me fix the problem.
For my container div I did not explicitly set a width but chrome's developer tool could show me the inherited width. I then looked at all the widths of the inner divs combined and then adjusted some of the inner div's width.

回复 原文
苍白女子 2024-08-01 02:33:12

浮动子 div 也有类似的问题。 就我而言..我将周围的 div 向右浮动，其中包含 h3 元素（具有文本对齐属性）-后跟 2 个子块元素。

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

-

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

解决方案 我诉诸于设置周围和子 div 的宽度，还在子 div 上居中对齐文本，以给出与第一种情况尝试类似的结果。

also similar issue with floating child div's. In my case .. I was floating a surrounding div to right, that contained h3 element (with text-align property) - followed by 2 child block elements.

Intent center h3 text, in relation to child block elements below it.

-

Problem? I did not have a set width for block child elements.. Why? I wanted the width to hold distinct padding on left / right relative to text amount in that container. eg. padding:10px 30px;

Solution I resorted to setting a width to surrounding and child divs, also center aligning text on child divs to give similar results of first case attempt.

回复 原文
夏花。依旧 2024-08-01 02:33:12

我遇到了同样的问题。 我有两个带有 float: left 的 div，位于 table td 内 - 我必须将 table td 样式设置为包含 style="text-align: left;" 以便它们正确对齐。

I experienced the same problem. I had two divs with float: left inside a table td -- I had to set the table td style to include style="text-align: left;" for them to correctly align.

回复 原文
江南烟雨〆相思醉 2024-08-01 02:33:12

我不是 HTML 英雄，所以就我而言，这个问题真的很愚蠢。

这只是一个语法错误，所以在像我一样开始胡思乱想之前，请务必检查所有语法。

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

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

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

I'm no HTML hero so in my case the problem was really silly.

It was just a syntax error so be sure you check all your syntax before you start pulling your hair out like I did.

And SAFARI was completely ignoring it and displaying the divs correctly floated so I got really confused.

BASICALLY it was an unclosed div tag that was creating the problem :

<div class="seperator" </div>    instead of    <div class="seperator"> </div>
回复 原文
~没有更多了~

关于作者

心碎无痕…

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文