如何在基础4的每个6列的两个div之间添加空格？ [英] How to add white space between two divs of 6 columns each in foundation 4?

问题描述

我在Zurb Foundation 4和SASS开发了一个网站。

I am developing a website in Zurb Foundation 4 and SASS.

我的代码如下：

<div class="row">
   <div class="large-6 columns redbg"> content goes here... </div>
   <div class="large-6 columns greenbg"></div>
</div>

两个内部div都有背景。我有一个30px的列槽。我想这个天沟是白色的。可能的解决方案，它为内部div和应用列和大-6类添加父div，它的方式代码如下：

Both of inner divs has background. I have a column gutter of 30px.I want this gutter to be white. The possible solution for it to add parent divs for both of inner divs and apply columns and large-6 class to it and this way code will look like:

<div class="row">
   <div class="large-6 columns">
        <div class="redbg">  content goes here... </div>
   </div>
   <div class="large-6 columns">
        <div class="greenbg"> content goes here... </div>
   </div>
</div>

但是通过应用这个解决方案，我只能为了设计而创建两个div。任何人都可以指导如何做到或更好的方法。

But by applying this solution I have to create two divs for only the sake of design. Can anyone please guide how to do it or a better approach.

我还想知道如何从一边（左边或右边）折叠列？

Also I wonder how to collapse a column from just one side (left or right)?

推荐答案

使用CSS将更容易 - 使用 background-clip 属性，

It would be much easier to use CSS - by using the background-clip property, which as its name suggests, allows you to clip the painting area of an elements background.

由于基础中的边框宽度在填充框内，因此您可以使用 content-框值。

Since the gutter width in foundation is within the padding box, you can use the content-box value.

这里有一个简单的例子： http://jsfiddle.net/CA669/950/embedded/result/

Here is a simple example: http://jsfiddle.net/CA669/950/embedded/result/

这篇关于如何在基础4的每个6列的两个div之间添加空格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！