基金会5 div造型

时间:2013-12-07 19:21:05

标签: html css zurb-foundation styling

我正在使用Foundation 5创建一个网站。这是主要的想法:我有一个深灰色的背景为身体,我想有两种类型的“帖子” - 一个具有红色背景的特色和一个具有白色背景的正常。这就是我对“post”div的看法。我想有两个不同的div具有相同的小9中心列属性。

<div class="row">
  <div class="small-9 small-centered columns">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis pariatur laudantium unde quidem? In, id, voluptatum cumque quos quibusdam fugiat quas nihil odit porro reprehenderit delectus vero praesentium quidem autem!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit commodi vel quibusdam non incidunt error doloribus. Eius, architecto, reiciendis omnis facilis minima autem amet fuga? Voluptatum architecto vel numquam id.
  </div>
</div>

我应该如何继续使用我的style.css文件创建两个这样的div?我的意思是,当我开始编写我的css而不使用Foundation时,我只有一个.post div和一个带边框,背景等的.featured_post。我现在正试图过渡到基金会,我被困住了。任何想法,将不胜感激。我想我的问题是:我应该在我的自定义样式表中设置小9个小中心列还是什么?

由于

1 个答案:

答案 0 :(得分:0)

使用基础的最佳实践方法是将其mixins与您自己的CSS类一起使用,这样您的标记将尽可能保持语义。

因此,请保留现有的样式并添加如下内容:

@media #{$small-up} {
  .posts {
    @include grid-row($behavior: nest);
    .post,
    .featured_post {
      @include grid-column($columns:9, $center:true);
    }
  }
}

文档相当不错:http://foundation.zurb.com/docs/components/grid.html