2列之间的Zurb基础边距答案

【问题标题】：Zurb foundation margin between 2 columns2列之间的Zurb基础边距
【发布时间】：2017-10-12 02:36:27
【问题描述】：

我试图在 2 列之间放置 10 像素的填充/边距。但是当我这样做时，第二列就会中断。

html代码

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns">Content 1</div>
   <div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>

如果我删除折叠，那么列会向它的所有方向添加填充。如何使行全宽，但两列之间只有 10px 的填充或边距。

非常感谢任何帮助。提前致谢。

【问题讨论】：

你想要类似：jsfiddle.net/gpsmrqtr ?

标签： html css zurb-foundation

【解决方案1】：

我们不能给列添加边距，否则行会溢出，因为列已经直接相互接触了。

你可以试试这样的：

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns space">Content 1</div>
   <div class="large-6 medium-6 small-12 columns space">Content 2</div>
</div>

然后是 CSS：

.space{
  padding: 10px; 
}

或者您可以将内部容器用于这样的列：

<div class="row collapse">
   <div class="large-6 medium-6 small-12 columns">
     <div class="panel">Content 1</div>
    </div>
   <div class="large-6 medium-6 small-12 columns">Content 2</div>
</div>

然后设置面板类的样式

【讨论】：

很棒的解决方案。非常感谢你的帮助。实际上这两个 div 都包含一个图像作为背景，所以我将无法使用面板。但是我必须使用左右 5 px 的 lspace 和 rspace。再次感谢您的指导。

【解决方案2】：

这可以通过嵌套网格在不使用自定义 css 的情况下完成。可以使用折叠或未折叠的列。

<div class="section-container">
<div class="row uncollapse section-wrapper">
 <div class="columns small-6 section-column-wrapper">
   <div class="row collapse">
    <div class="columns small-12">
        Left Column Text
    </div>
   </div>
  </div>
<div class="columns small-6">
  <div class="row collapse section-column-wrapper">
      <div class="columns small-12">
           Right Column Text
      </div>
     </div>
   </div>
  </div>

https://codepen.io/michaelwebster/pen/KXerOx

【讨论】：