面试题：CSS框架Foundation中栅格系统的基本使用

Question

在Foundation的栅格系统里，如何创建一个两列布局，并且在不同屏幕尺寸下这两列有不同的宽度占比？请描述基本的HTML和CSS代码结构。

Answer 1

HTML 代码结构

<div class="container">
    <div class="row">
        <div class="col-md-6 col-sm-8">
            <!-- 第一列内容 -->
        </div>
        <div class="col-md-6 col-sm-4">
            <!-- 第二列内容 -->
        </div>
    </div>
</div>

说明

1. container 类是 Foundation 中用于包裹页面主要内容的容器，它提供了适当的内边距和居中效果。
2. row 类用于创建水平方向的一组列。它通过清除浮动等方式确保列能正确布局。
3. col-md-6 表示在中等及以上屏幕尺寸（通常 md 对应 768px 及以上）时，该列占据 6 份宽度，两列就刚好平分 12 份栅格宽度。
4. col-sm-8 和 col-sm-4 表示在小屏幕尺寸（通常 sm 对应 480px 到 767px）时，第一列占 8 份宽度，第二列占 4 份宽度。

CSS 相关（一般无需额外写CSS，若有特殊样式需求）

/* 例如给列添加边框样式 */
.col-md-6,
.col-sm-8,
.col-sm-4 {
    border: 1px solid #ccc;
}

上述 CSS 代码只是示例，可根据实际需求对列添加各种样式，如背景色、内边距、外边距等。