覆盖zurb基础浮动右边属性的最后一个元素

时间:2015-09-11 23:21:42

标签: css zurb-foundation zurb-foundation-5

我正在使用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属性时它也可以工作,这也是我想要避免的。

2 个答案:

答案 0 :(得分:3)

我在处理动态内容时发现了这个问题。在这种情况下,我不知道我最终会拥有多少项,并且不想覆盖基础默认行为。在这种情况下的解决方案是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员工。 : - )

答案 1 :(得分:1)

在HTML / CSS中,您需要确保自定义类比您重写的类更具体,并且在Zurb的CSS之后加载CSS。

Zurb有以下课程;

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

这意味着attribute class contains "column" and is last in parent。为了能够覆盖这一点,请尝试将其添加到Zurb&#39; s之后加载的CSS文件的末尾,并将div更改为<div class="small-6 columns my-class">

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