響應式網格系統中的列

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％，這給100％ - 1.6％， - 1.6 ％/ 2 = 48.4％爲.span_1_of_2所以

.span_1_of_2 { 
    width: 48.4%; 
} 

---

*注：這是基於你的HTML，因爲你只用.span_1_of_2，在小提琴使用這兩種跨度，並將其設置爲這個維度。

Answer 2

51.8 + 49.2 = 101％

從第一個或第二個減去1。

Answer 3

如果我正在創建一個響應式網格，我會使我的<div>元素display: inline-block而不是float: left和display: block。這樣，如果柱子足夠小，它們將彼此相鄰，但是如果它們變得太寬，則最右邊的<div>將低於其他<div>。

http://jsfiddle.net/ZM3bK/