响应式网格系统中的列答案

【问题标题】：columns in the responsive grid system响应式网格系统中的列
【发布时间】：2013-11-29 03:11:33
【问题描述】：

我是第一次尝试响应式网格系统，但很难让我的列并排放置。我只对一些设计元素使用两列网格，其余部分使用居中内容。

以下是相关的 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）

谢谢大家

【问题讨论】：

标签： html css grid

【解决方案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 中使用了两个跨度并将它们设置为这个维度。

【讨论】：

【解决方案2】：

51.8 + 49.2 = 101%

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

【讨论】：

【解决方案3】：

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

http://jsfiddle.net/ZM3bK/

【讨论】：