为最后一个元素覆盖 zurb foundation float right 属性

Question

我正在使用 Zurb 基础，我正在尝试创建一个将被调用的 css 属性并覆盖他们最后给出的属性 float:right柱子。我知道他们提供了 end class 让你能够在左边浮动 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 属性时它起作用了，这也是我想避免的。

Answer 1

在 HTML/CSS 中，您需要确保您的自定义 class 比您要覆盖的 class 更具体，并且您的 CSS 在之后加载Zurb 的 CSS.

Zurb 有以下 class;

[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;
}

Answer 2

我在处理动态内容时发现了这个问题。在这种情况下，我不知道我最终会拥有多少项目，也不想覆盖基金会的默认行为。这种情况下的解决方案是 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 的块网格 class，它指定每行应包含多少个项目，如下所示：

<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 同事有所帮助。 :-)

为最后一个元素覆盖 zurb foundation float right 属性

overide zurb foundation float right property for last element

css

zurb-foundation

zurb-foundation-5