Html chrome 中的第二个浮动 div 在第一个 div 之前清除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1013027/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The second floating div in chrome clears down before first div
提问by
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?
两个 div 彼此相邻，都漂浮在包装器内。在 IE 和 firefox 中它们显示正确，但在 Chrome 中，第二个浮动 div 在 Div A 下方清除。当我在 css 中删除“float:left”时，它在 Chrome 中转到正确的位置，但在 IE 和 firefox 中清除（正如它应该）。我不知道为什么它在 Chrome 中以这种方式出现。有任何想法吗？
采纳答案by Bryan Migliorisi
The HTML and CSS would be useful to answer this.
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.
HTML 和 CSS 将有助于回答这个问题。
如果您只有两个 div 并且您希望它们彼此相邻浮动，则在每个 div 上设置一个宽度，一个向左浮动，另一个向右浮动。记得在两者之间留一些空间。
回答by nexus_07
in my case i use display:inline-tablefor the parent element of the floated elements.. Even if it is not a table.
在我的情况下，我display:inline-table用于浮动元素的父元素。即使它不是表格。
I used the display:inline-tablein order to fix the bug that google chrome had encountered..
我使用 是display:inline-table为了修复谷歌浏览器遇到的错误..
回答by lukaszkups
The solution is simple - just add the div which contains all these divs an attribute: display: table;- it should solve the problem.
解决方案很简单 - 只需添加包含所有这些 div 属性的 div：display: table;- 它应该可以解决问题。
回答by Chuck Norris
I've same issue in Chrome and I solve it by giving display:inline-tableto parent div
我在 Chrome 中有同样的问题，我通过给display:inline-table父 div 来解决它
回答by Khub Ram
In Chrome - Seems this issue has something to do with displayattribute of parent element. I had same issue and did lot of search. Finally i got it fixed by removing displayCSS attribute of parent TD tag. I also obsorved one wiered thing. When i had display:block;for parent a TD table element, in Chrome, colspanwas not working (in IE it was working fine). I scratched my lots of hairs finding this problem.
在 Chrome 中 - 似乎这个问题与父元素的显示属性有关。我有同样的问题并做了很多搜索。最后我通过删除父 TD 标签的显示CSS 属性来修复它。我还观察到一件奇怪的事情。当我有display:block; 对于父 TD 表元素，在 Chrome 中，colspan无法正常工作（在 IE 中它工作正常）。我抓了很多头发发现这个问题。
回答by kencise
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>
我有多个 css float left div，里面有文本链接，容器在每个的右边重叠。修复是删除链接显示文本中的空格。例如。...> TEXT </a>到...>TEXT</a>
回答by Wouter
You must give 1 div the height
你必须给 1 div 高度
For example
例如
Div 1
第 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
分区 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;
回答by Anand Sharma
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.
我遇到了同样的问题，Div 和它的 Children Span 都正确浮动，为了解决这个问题，我只是将显示内联添加到 Div 父级，现在它在 Chrome 和 Safari 中都可以正常工作。
回答by Eric Klien
I wrapped everything in <div style="display:inline;"> ... code .. </div>and solved the problem.
我把所有东西都包起来<div style="display:inline;"> ... code .. </div>并解决了这个问题。
回答by Michel Joanisse
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.
浮动子div也有类似的问题。在我的情况下..我将周围的 div 向右浮动，其中包含 h3 元素（具有 text-align 属性） - 后跟 2 个子块元素。
Intentcenter h3 text, in relation to child block elements below it.
意图中心 h3 文本，与其下方的子块元素相关。
-
——
Problem?I did not have a set widthfor 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;
问题？我没有为块子元素设置宽度.. 为什么？我希望宽度相对于该容器中的文本量在左/右保持不同的填充。例如。填充：10px 30px;
SolutionI 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.
解决方案我诉诸于为周围和子 div 设置宽度，还将子 div 上的文本居中对齐，以提供与第一次尝试类似的结果。
