我正在构建一个网站,我正在使用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)
答案 0 :(得分:1)
我相信答案是简单的,将其添加到您的样式表中:
.row {
min-width: 500px;
}
div.row
现在的最小宽度为500px。当浏览器调整为小于500px的大小时,将出现滚动条,您的布局将保持不变。
答案 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 */
}
因此,这些规则将超越默认规则,这些规则将不那么具体。
注意:忽略使用特定规则,因为它会影响 表现,以及你最终会写出更多的规则来过度骑行 具体规则。