当窗口宽度太小时,是否可以使基础元素不自动环绕?

时间:2013-07-08 05:33:50

标签: css zurb-foundation

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

例如,如果我有以下代码

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

2 个答案:

答案 0 :(得分:1)

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

.row {
    min-width: 500px;
}

div.row现在的最小宽度为500px。当浏览器调整为小于500px的大小时,将出现滚动条,您的布局将保持不变。

JSFiddle demo

答案 1 :(得分: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 */
}

因此,这些规则将超越默认规则,这些规则将不那么具体。

  

注意:忽略使用特定规则,因为它会影响   表现,以及你最终会写出更多的规则来过度骑行   具体规则。