Foundation 5 div造型

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

<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而不使用基金会时，我只有一个.post div和一个带有边框，背景等的.featured_post。我现在正在尝试过渡到基金会，并且我被卡住了。任何想法，将不胜感激。我想我的问题是：我是否应该在我的自定义样式表中设置小9小型中心列或者什么？

感谢

来源

2013-12-07 Popa Andrei

使用基础的最佳实践方法是使用其混入用自己的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

来源

2013-12-09 13:35:08

Foundation 5 div造型

回答

相关问题