列之间的 Zurb 基础边距 [英] Zurb Foundation Margin between Columns
本文介绍了列之间的 Zurb 基础边距的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个非常简单的 Foundation CSS 代码
<div class="large-offset-1 large-6 columns">内容放在这里</div><div class="large-4 end columns">Side 在这里</div>
我希望列之间有边距.目前,只有填充.因此,如果我将 background-color
添加到这些列中,那么它们会相互粘连.
Foundation 没有为此提供解决方案吗?
解决方案
你可以试试这个:
<div class="large-offset-1 large-6 columns padded-column"><div class="column-content">内容放在这里.</div><div class="large-4 end columns padded-column"><div class="column-content">Side 在这里</div>
然后,对于样式:
.padded-column {填充:10px;}.列内容{背景:红色;}
I have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color
to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
解决方案
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
这篇关于列之间的 Zurb 基础边距的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文