Question

我第一次尝试响应式网格系统，并且让我的列并排放置时遇到了麻烦。我只为一些设计元素使用了两列网格，而其余部分则使用了居中内容。

以下是html的相关内容：

<div class="section group" id="about">
   <div class="col span_1_of_2" id="p1">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
   <div class="col span_1_of_2" id="p2">
      <p>Lorem ipsum dolor sit amet</p>
   </div>
</div>

和css：

.section {
clear: both;
padding: 0px;
margin: 0px;}

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;}

.span_2_of_2 {
width: 51.8%;}
.span_1_of_2 {
width: 49.2%;}

为什么我的列位于一列而不是并排？我错过了什么？

（您可以找到响应式网格here）

谢谢大家

Answer 1

宽度问题，这是Fiddle

.col剩余保证金为1.6％，其中.span_1_of_2为100％ - 1.6％ - 1.6％/ 2 = 48.4％

.span_1_of_2 {
  width: 48.4%;
}

*注意：这是基于您的HTML，因为您只使用了.span_1_of_2，在Fiddle中使用了两个跨度并将它们设置为此维度。

Answer 2

51.8 + 49.2 = 101％

从第一个或第二个减去1。

Answer 3

如果我要创建响应式网格，我会创建<div>个元素display: inline-block，而不是float: left和display: block。这样，如果列足够小，它们将彼此相邻，但如果它们变得太宽，则最右边的<div>将低于另一个<div>。

http://jsfiddle.net/ZM3bK/

响应式网格系统中的列

3 个答案: