html - 具有最小宽度，宽度％的响应式布局没有避免间隙的简单方法吗？

Question

我有一个简单的响应式网页，可以在两列中运行，每个 div 都有 css

.half {
  width: 45%;
  min-width: 300px;
  float: left;
}

对于宽屏幕，每个 div 列的宽度为一半，对于较窄的屏幕，列压缩直到达到 300 像素，然后它们换行。基本上工作正常。

但是，当屏幕为 400 像素宽(比方说)时，列仍被压缩为 300 像素。 (因为 400px 的一半是 200px，所以 min-width 300px 优先。但在这种情况下，我希望它是完整的 400px，因为它的右边没有其他列。)

有没有简单的方法来阻止它？

有新的 flex-box 选项，但我需要在公共(public)网络、许多浏览器和手机上运行。可以为新产品打磨并为旧产品工作的东西。我不想为此添加 JavaScript。

我认为答案很简单，不可能。但如果能确认我没有遗漏任何内容，我将不胜感激。

(已经有很多类似的问题，但我找不到专门解决这个简单案例的问题。)

(编辑以解决评论中的混淆。)

Answer 1

我假设您想要实现一个 media-query 以在窗口小于特定宽度时指定新规则。因此，您可以执行以下操作:

// Override styles for elements once the element is less than a specified width
@media only screen and (max-width: 400px) {
    // If window is less than 400px, apply new styles. ie: width takes full width
    .half {              
         width: 100%;
    }
}

一旦设备/窗口为 400 像素或更小，这将使 .half 类的宽度为 100%。

由misterManSam 提供的media-query 示例: JS Bin