Question

我有基于zurb foundation 5的简单结构。

我有一个左栏显示菜单项，右栏显示实际页面内容。

我正在尝试将margin-right:20px;添加到课程white-bar。这打破了设计。我想在两个之间添加空格，以便可以看到背景图像。

我也希望我在页面中间垂直。

<div class="row wrapper">
    <!--left bar-->
    <div class="small-12 medium-3 large-3 columns white-bar"></div>
    <!--left bar-->
    <!--Content area-->
    <div class="small-12 medium-9 large-9 columns content-bar"></div>
    <!--Content area-->
</div>

更新溶液

我使用background-clip: content-box;，但我不确定这是否得到所有或旧浏览器的支持。

.white-bar
{
    background-color:#fff;
    height:700px;
    background-clip: content-box;
}

Answer 1

http://jsfiddle.net/pvG7V/

<强> HTML ：

<div class="row">
    <div class="medium-2 columns"></div>
    <div class="medium-2 columns"></div>
    <div class="medium-2 columns"></div>
    <div class="medium-2 columns"></div>
    <div class="medium-2 columns"></div>
    <div class="medium-2 columns"></div>
</div>

<强>的CSS：

body{
    background-color:pink;
}
.columns{
    height:200px;
    background-color:yellow;
}
@media only screen and (min-width: 40.063em){
    .columns + .columns{
        padding:0;
        padding-left:20px;
        background-clip: content-box;
    }
}

另一种方式（没有background-clip）：

http://jsfiddle.net/63SE4/

body{
    background-color:pink;
}
.columns{
    height:200px;
    background-color:yellow;
}
@media only screen and (min-width: 40.063em){
    .columns + .columns:before{
        content: "";
        display:block;
        width:20px;
        height:100%;
        background-color:pink;
    }
}

在zurb列之间添加空格

1 个答案: