css - 使用960gs的基本问题

Question

我做了下面的工作，

<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>

结果:里面出现两个框，左右外边距为10px。

问题 1:

下面不起作用，为什么一个盒子被推到另一个盒子下面？我应该怎么做才能修复它？

<div class="container_12">
<div class="grid_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
</div>
</div>

问题 2:

对于我在问题开头提到的 MarkUp 1，我将文本替换为 Google 可视化图表，它们的行为类似于问题 1。一张图表被推到另一张图表下方。

问题三

我是否总是必须在网格广告达到容器宽度后指定清除？例如，

<div class="container_12">
<div class="grid_6">Some Text</div>
<div class="grid_6">Some Text</div>
<div class="clear"></div>
<div class="grid_12"></div>
</div>

问题 4

我听说 clearfix 与 clearing 的作用相同，我应该在父容器或其中的 div 的什么地方使用它？

Answer 1

问题一

您需要在第一个 div 上添加一类“alpha”以删除左边距，并在最后一个 div 上添加一类“omega”以删除右边距。

无论何时嵌套 div，都需要将 alpha 和 omega 类添加到第一个和最后一个 div。

<div class="container_12">
    <div class="grid_12">
        <div class="grid_6 alpha">Some Text</div>
        <div class="grid_6 omega">Some Text</div>
    </div>
</div>

问题2

这可能是因为内容即图表比 div 宽。

问题三

仅当您想清除其上方的所有元素时才使用清除 div。

问题4

只要你有一个包含 float 元素的 div，你就可以给它一个 clearfix 类来清除里面的所有东西。