1

我正在构建一个用于zurb-foundationUI 构建块的网站。但是，在某些地方，我想让 Web 中的元素无响应。

例如，如果我有以下代码

<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）

4

2 回答 2

1

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

.row {
    min-width: 500px;
}

div.row现在将具有 500 像素的最小宽度。当浏览器调整为小于 500 像素的大小时，滚动条会出现，并且您的布局将保持完整。

JSFiddle 演示

于 2013-07-08T06:34:24.087 回答
0

您可以做的是编写更高特异性的规则，这些规则将覆盖不太具体的规则，例如，您可以将自定义类分配给容器元素，例如

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

现在你可以像这样定位这些元素......

.custom_wrapper {
   /* Target .custom_wrapper */
}

.custom_inner_wrapper {
   /* Target .custom_inner_wrapper */
}

现在使用它来定位子元素，例如

.custom_wrapper .custom_inner_wrapper div:nth-of-type(1) {
   /* Targets 1st div inside .custom_inner_wrapper */
}

因此，这些规则将覆盖不太具体的默认规则。

注意：忽略使用特定规则，因为它会影响性能，并且您最终会编写更多规则来覆盖特定规则。

于 2013-07-08T05:38:05.607 回答