我正在使用 Zurb 基础,我正在尝试创建一个 css 属性,该属性将被调用并覆盖他们为最后一列提供的属性
float:right
。我知道他们提供了 end
类,使您能够在左侧浮动 div
,但我有一种情况,我确实必须确保我的 css 属性是最后要调用的属性。
代码:
<div class="row">
<div class="my-class small-6 columns">floated on the right by foundation</div>
</div>
.my-class{
float:left;
}
上面的代码不起作用,但是当我添加
important
属性时它就起作用了,这也是我想避免的。
我在处理动态内容时发现了这个问题。在这种情况下,我不知道我最终会拥有多少项目,并且不想覆盖基础的默认行为。本例的解决方案是 Foundation 的块网格: http://foundation.zurb.com/docs/components/block_grid.html
举个例子,我最初尝试实现这一点的方法是将每个重复元素包装在 div 中,并使用应使用的列数,如下所示:
<div class="row">
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div>
<div class="columns small-3">content</div> <!-- Floated right. -->
</div>
相反,更好的方法是使用 Foundation 的块网格类,它指定每行中应包含多少个项目,如下所示:
<div class="row">
<ul class="small-block-grid-4">
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li>
<li>content</li> <!-- Right where I expected it! -->
</ul>
</div>
希望这对一些 Google 员工有所帮助。 :-)
在 HTML/CSS 中,您需要确保您的自定义类比您要覆盖的类更具体,并且您的 CSS 在 Zurb 的 CSS 之后加载。
Zurb 有以下类;
[class*="column"] + [class*="column"]:last-child {
float: right; }
这意味着
attribute class contains "column" and is last in parent
。为了能够覆盖它,请尝试将其添加到 Zurb 之后加载的 CSS 文件的末尾,并将 div 更改为 <div class="small-6 columns my-class">
[class*="my-class"]:last-child {
float: left;
}