JS fiddle :https://jsfiddle.net/7p81bnto/2/
HTML:
<body>
<main>
<div>
<div style="
height: 50px;
width: 200px;
background-color: green;
float: right;
"></div>
<div style="
height: 50px;
width: 100%;
background-color: yellow;
display: table;
padding-top: 50px;
"></div>
</div>
</main>
</body>
在 Firefox 和 Chrome 中查看这些会给出不同的布局。 谁能解释为什么会这样。我怀疑它与 display:table 属性有关，但我不太明白为什么。
由于烦人的原因，我无法删除 display:table，但我需要让下方 div 的主体在 float div 下方排成一行。 谁能建议如何在两种浏览器中一致地实现这一目标？
最佳答案
关于html - Chrome 和 Firefox 的布局差异，与 float 和显示有关 : table，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31127874/