Question

我有以下HTML和CSS。

<!doctype html>
<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Daily Focus</title>
  </head>
  <style type="text/css">
    .column-left{ float: left; width: 33%; }
    .column-right{ float: right; width: 33%; }
    .column-center{ display: inline-block; width: 33%; }
    @media screen and (max-width: 600px) {
      .column-left, .column-right, .column-center{ float: none; width: auto; }
    }
  </style>
  <body>
    <div id="col1" class="column-left">
      <h2>Column 1</h2>
      <p>This is the leftmost column</p>
    </div>
    <div id="col2" class="column-center">
      <h2>Column 2</h2>
      <p>This is the middle column</p>
    </div>
    <div id="col3" class="column-right">
      <h2>Column 3</h2>
      <p>This is the rightmost column</p>
    </div>
  </body>
</html>

目的是显示响应式3列布局：宽度超过600px，显示3列，在其下方，列堆叠。

这在IE 11.x，Firefox 36.x和Safari 8.x上运行良好。从低于600px到超过和返回，列按预期堆叠和对齐。

当我在Chrome 41上尝试此操作时，最右边的列永远不会对齐，除非最初显示。如果我在600px下调整大小，列会堆叠，但是，如果我调整大小超过600px，第三列向右移动，但向下移动，低于其他两个（还没有足够的声望来发布图像，但我认为你明白了）

我尝试了一些常用样式属性（浮动/显示）的组合，但无济于事。什么是Chrome做其他人没有（或相反），我如何解决它，以便布局在所有4个桌面浏览器上呈现相同？

谢谢！

Answer 1

我也可以在另一个网站上重现这一点。我在这里提出了一个问题 - https://code.google.com/p/chromium/issues/detail?id=472122

编辑确认为错误，您可以在上面的链接中跟踪修复进度。

变通方法包括将所有div浮动到左边或浮动前两个并使用position：relative来封闭div和position：absolute; right：0px;在你希望浮动的div上

Answer 2

我认为是Chrome的错误，但我找不到该特定方案的任何报告，只有开发人员在包装器上使用clear:both时出现的错误

但是您可以在所有列上使用float: left; width: 33%;并获得所需的结果，您不需要使用float:right;并使用inline-block因为这3个元素已经在相同的格式化上下文

.column-left{ float: left; width: 33%; }
.column-right{ float: left; width: 33%; }
.column-center{ float: left; width: 33%; }
@media screen and (max-width: 600px) {
  .column-left, .column-right, .column-center{ float: none; width: auto; }
}

我希望它可以帮到你

CSS3：在Chrome上呈现时，3列响应显示会移动

2 个答案: