2

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

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

我尝试过使用 Foundation 的类而不是 Sass mixins，但我得到了相同的结果。我也尝试过重置为 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 像素时，红色列和绿色列应并排排列。唉，他们不是。

4

2 回答 2

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”。

于 2013-11-09T20:21:20.950 回答
0

将您的 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;
}
于 2013-03-21T13:08:56.313 回答