Zurb Foundation - Sass 列不保持在行中答案

【问题标题】：Zurb Foundation - Sass columns not staying in rowZurb Foundation - Sass 列不保持在行中
【发布时间】：2013-03-10 22:28:15
【问题描述】：

我在使用 Sass/Compass 使列在 Foundation 4 中工作时遇到了一个非常基本的问题。

在大于 $small 媒体查询断点 (768px) 的屏幕尺寸上，我希望两列的宽度相等（每列 6 列）并且彼此相邻。现在，在大于 $small 的屏幕尺寸下，每列仅占据页面的左半部分，第二列向下低于第一列。

我尝试使用 Foundation 的类而不是 Sass 混合，但我得到了相同的结果。我也尝试过重置为 Foundation 默认设置和导入，但没有任何变化。

我有以下 HTML：

<section>
  <div class="header">
    <h1>Sample text here.</h1>
  </div>
  <div class="content">
    <p>Sample text here.</p>
  </div>
</section>

我正在使用以下 SCSS：

section {
  @include grid-row;
}

.header {
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

.content {
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

这里是简化测试用例的链接：http://bit.ly/149zpEq

在屏幕尺寸大于 768 像素时，红色列和绿色列应并排。唉，他们不是。

【问题讨论】：

标签： css responsive-design sass compass-sass zurb-foundation

【解决方案1】：

使用此标记，无需任何额外的 sass 代码：

<section class="row">
    <div class="large-6 medium-6 small-12 columns">
        <div class="header">
            <h1>Sample text here.</h1>
        </div>
    </div>
    <div class="large-6 medium-6 small-12 columns">
        <div class="content">
            <p>Sample text here.</p>
        </div>
    </div>
</section>

您只需要为大于 $small 的屏幕添加“large-6”和“medium-6”，为小屏幕添加“small-12”。

【讨论】：

【解决方案2】：

把你的 Sass 改成这个。

.header {
  display: table-cell;
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

.content {
  display: table-cell;
  @include grid-column( 12 );
  @media #{$small} {
    @include grid-column( 6 );
  }
}

仅靠display: table是不够的，子元素必须有display: table-cell。

另一种选择是

section > div{
  display: table-cell;
}

【讨论】：