我一直在使用 Foundation 6 框架尝试在列之间创建少量填充,但是我似乎找不到解决方案,我哪里出错了?
Here's an image explaining what I've got and what I'm trying to achieve
<div class="row">
<div class="column large-4 small-12">
<P>Text1</P>
</div>
<div class="column large-4 small-12">
<p>Text2</p>
</div>
<div class="column large-4 small-12">
<p>Text3</p>
</div>
</div>
.column, .columns {
border:red 1px solid;
background-color:@menu-color;
padding:5px;
}
最佳答案
我对 Zurb Foundation 不太熟悉,但看到他们使用 Flexbox。我也修改了您提供的代码以使用 Flexbox,尽管它仅用于布局目的。我们只是定位中间行元素并为其提供一些左右边距。
.column,
.columns {
border: red 1px solid;
padding: 5px;
}
.row {
display: flex;
flex-wrap: wrap;
}
.column {
flex: 1;
}
.column:nth-child(even) {
margin-left: 10px;
margin-right: 10px;
}
<div class="row">
<div class="column large-4 small-12">
<P>Text1</P>
</div>
<div class="column large-4 small-12">
<p>Text2</p>
</div>
<div class="column large-4 small-12">
<p>Text3</p>
</div>
</div>
关于html - 如何在 Foundation Float 网格的列之间添加填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54380072/