css - 当窗口宽度太小时，是否可以使基础中的元素不自动环绕？

Question

我正在构建一个网站，我正在为其使用 zurb-foundation 作为 UI 构建 block 。但是，在某些地方我想让网络中的元素无响应。

例如，如果我有下面的代码

<div class="row">
  <div class="large-9 columns">
      <div class="my-element">Some elements1</div>
      <div class="my-element">Some elements2</div>
      <div class="my-element">Some elements3</div>
  </div>
</div>

对于 my-element，我有

.my-element {
  float: left;
}

现在，如果我将浏览器的宽度缩小到无法容纳所有三个元素的特定宽度，则这三个元素将环绕成 2-3 行。我想知道是否有办法让它不那样做？也就是说，当浏览器宽度太小时，用户应该左右滚动网站。 (Stackoverflow 本身就是我想要实现的一个很好的例子 :D)

Answer 1

我相信答案很简单，将其添加到您的样式表中:

.row {
    min-width: 500px;
}

div.row 现在的最小宽度为 500 像素。当浏览器的尺寸调整为小于 500 像素时，滚动条将出现，您的布局将保持原样。

JSFiddle demo