如何在Foundation中设计一个布局,左侧和右侧有7%的空白空间?

时间:2014-06-19 09:13:29

标签: zurb-foundation

在使用基础css设计网站布局时,如果我在div中使用网格系统作为下面的类行,则在图像中左右两侧提供更多空间。

enter image description here

The Code I am using is as bellow within the div with class="row"


<div class="row">
        <div class="small-2 large-4 columns">small-2 large-4 columns</div>
        <div class="small-4 large-4 columns">small-4 large-4 columns</div>
        <div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>

在这里,左右两侧只需要5-7%的空间。如何通过使用粉底来实现这一目标?

4 个答案:

答案 0 :(得分:2)

您可以使用Foundation中的Centered Columns执行此操作。   小1行占用8.3333%所以通过下面的html你可以在右边和左边有4.166%的空间。

<div class="row">
  <div class="small-11 small-centered columns">
        <div class="row">
        <div class="small-2 large-4 columns">small-2 large-4 columns</div>
        <div class="small-4 large-4 columns">small-4 large-4 columns</div>
        <div class="small-6 large-4 columns">small-6 large-4 columns</div>
  </div>
  </div>
  </div>

这是一个小提琴 - link

答案 1 :(得分:1)

如果我理解正确你想要这样的东西http://jsfiddle.net/Tb9Vg/1/但它与基金会本身无关。

HTML:

<div class="wrap">
    <div class="row">
            <div class="small-2 large-4 columns">small-2 large-4 columns</div>
            <div class="small-4 large-4 columns">small-4 large-4 columns</div>
            <div class="small-6 large-4 columns">small-6 large-4 columns</div>
    </div>
</div>

的CSS:

.wrap{
    padding-left:7%;
    padding-right:7%;
}
.columns{
    height: 500px;
    background-color:blue;
}

答案 2 :(得分:0)

.row(margin-left:auto; margin-right:auto; width:30em;}

margin-left和margin-right以元素为中心,使用width属性,您可以将元素的大小设置为您想要的大小(30只是一个示例)。这样做的好处是,当您调整屏幕大小时,它会保持与两侧的距离。

答案 3 :(得分:0)

我们需要根据需要更改基础类“行”的宽度。我们将在左右两侧获得空间。