Question

出于某种原因，在更改屏幕宽度时，使用浮动规则设置断点似乎并不适用。看看这个简单的例子：

＆＃13;

.left-content {
  display: block;
  margin: 30px auto;
  width: 130px;
}

.right-content {
  display: block;
  margin: 30px;
  margin: 30px auto;
  width: 160px;
}

@media (min-width:750px) {
  .left-content {
    display: inline-block;
  }
  
  .right-content {
    display: inline-block;
    float: right;
  }
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

    <div class="container">
      <div class="left-content">This is some text!</div>
      <div class="right-content">
        <button>Click me!</button>
        <button>Click me 2!</button>
      </div>
    </div>
  
</body>
</html>

＆＃13;

首次在大屏幕上加载时，按钮和文本正确对齐。一旦您将屏幕缩小到应用原始规则的点（触发IE display: block;），在展开屏幕时按钮将无法正确浮动。

使用响应断点时浮动是否已损坏？

（JSBin link因此您可以更轻松地测试我所描述的内容，似乎预览按钮正在破坏示例代码段。）

修改

这似乎只在Google Chrome中被破解。有没有关于如何使这个工作的资源，或者我应该依靠另一种技术让这些按钮在右边？

Answer 1

我明白你在说什么，我不确定为什么会这样。

但要修复它，你可以添加一个＆＃34; float：left＆＃34;到你的＆＃34; div.left-content＆＃34;当屏幕小于750px时。

调整大小后断点不应用浮点规则

修改

1 个答案: