在使用基础css设计网站布局时,如果我在div中使用网格系统作为下面的类行,则在图像中左右两侧提供更多空间。
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%的空间。如何通过使用粉底来实现这一目标?
答案 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)
我们需要根据需要更改基础类“行”的宽度。我们将在左右两侧获得空间。