How to add white space between two divs of 6 colum

问题:

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

My code looks like:

<div class="row">
   <div class="large-6 columns redbg"> content goes here... </div>
   <div class="large-6 columns greenbg"></div>
</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>

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)?

回答1:

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.

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

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

回答2:

Can you make the row have a white background? That way the gutter will be white.

The other way I can think of is how you are currently doing it. I've had to do similar solutions.