中心百分比網格，HTML

我現在正在構建我自己的小流體網格供我個人使用，然後再進入Sass，而不需要大型框架，因爲我希望瞭解一些更簡單的步驟在他們後面。我想要做的是根據頁面中心列。由於包裝只使用屏幕的90％的寬度中心百分比網格，HTML

<body> 
    <div class="wrapper"> 
     <div class="Column"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p> 
     </div> 

     <div class="Column"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p> 
     </div> 

     <div class="Column last"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing.</p> 
     </div> 
    </div> 
</body>

CSS

body{ 
    text-align:center; 
} 

.wrapper{ 
    margin: 0 auto; 
    width : 90%; 
} 

.Column{ 
    float : left; 
    width : 22%; 
    margin-right : 4%; 
} 

.last{ 
    margin-right : 0; 
}

我在這裏已經設置一個小測試，我希望能居中列http://jsfiddle.net/rjtK9/

來源

2013-04-21 Melky

你的包裝已經是居中。您的列在包裝內部左側浮動。因此，你應該只是增加你的列的大小：

.Column{ 
    float : left; 
    width : 30%; 
    margin-right : 4%; 
}

來源

2013-04-21 12:48:36 Kenneth

啊我很傻我佔了4列，謝謝。 – Melky 2013-04-21 12:52:07

它已經爲中心的，你剛剛過兩次保守給予寬度
我只是把一個小fiddle

我確實給了列33％的寬度和20px的排水溝的權利。的添加以下的CSS

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box; 
box-sizing: border-box;

上面的代碼包括在33％的寬度的填充。
欲瞭解更多關於盒子尺寸檢查的信息check here

來源

2013-04-21 12:51:00 lazyprogrammer

一個有趣的解決方案，我要+1，但不會是我選擇的解決方案，謝謝。 – Melky 2013-04-21 12:54:37

沒有probs，很高興我能幫上忙。但是如果你閱讀Chris Coyier的文章，它會有所幫助，當我開始使用響應式CSS佈局時，它幫助了我很多 – lazyprogrammer 2013-04-21 12:56:54

中心百分比網格，HTML

回答

相關問題