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

Question

我正在使用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属性，这是我想避免的东西，以及。

Answer 1

我在处理动态内容时发现了这个问题。在这种情况下，我不知道最终会有多少项，也不想重写foundation的默认行为。在这种情况下的解决方案是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>

希望这对其他谷歌人有所帮助。: -)

Answer 2

在HTML/CSS中，你需要确保你的自定义类比你要覆盖的类更具体，并且你的CSS是在Zurb的CSS之后加载的。

Zurb有以下类;

[class*="column"] + [class*="column"]:last-child {
  float: right; }

表示attribute class contains "column" and is last in parent。为了能够覆盖它，尝试将它添加到您的CSS文件的末尾，该文件在Zurb之后加载，并将div更改为<div class="small-6 columns my-class">

[class*="my-class"]:last-child {
    float: left;
}