三列網格響應

我是初學HTML和CSS。我有一些JavaScript的知識，而不是jQuery和響應式設計。三列網格響應

所以我想做一個3列網格對齊中心，每個寬度爲33.33％。在每個水平和兩邊的一些空間之間也有一點空間。但我似乎可以將它與中心對齊。這裏是我的html。我也希望它能夠響應。它應該減少到兩列，然後到一個這樣的東西。我怎麼能做到這一點？

這裏是我的HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<link rel="stylesheet" href="Home.css" type="text/css" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
</head> 
<body> 
<div class="layout" align="center"> 
<div class="success"> </div> 
<div class="success"> </div> 
<div class="success"> </div> 
<div class="success"> </div> 
<div class="success"> </div> 
<div class="success"> </div> 
<div class="success"> </div> 
</div> 
</body> 
</html>

CSS

@charset "utf-8"; 
/* CSS Document */ 

.success { 
display:inline-block; 
background: tomato; 
padding: 5px; 
width: 200px; 
height: 150px; 
margin-top: 10px; 
line-height: 150px; 
color: white; 
font-weight: bold; 
font-size: 3em; 
text-align: center 
} 

.success li:last-child { 
float: none; 
width: auto; 
} 

.layout { 
width:75%; 
}

來源

2014-02-08 user3219918

您需要重新開始。

基本上你的html結構需要反映你的3列布局。通常這是通過<div>標籤實現的。

所以像：

<div id="content"> 
    <div id="contentleft"> 
    your first column content is here 
    </div> 
    <div id="contentcenter"> 
    the stuff for the middle goes here 
    </div> 
    <div id="contentright"> 
    etc. etc. etc.<br> 
    ... 
    </div> 
</div>

那麼你的CSS可以做大意如下的內容：

#content { 
    width: 900px; 
} 
#contentLeft { 
    width:33%; 
    float:left; 
} 
#contentcenter { 
    width:33%; 
    padding:1%; 
    float:left; 
} 
#contentright { 
    width: 33%; 
    float:right; 
}

來源

2014-02-08 17:09:14 Loopo

現在，我想這是6個顏色框，3列，2行，以及它們和內容div之間的空格要對齊到中心。我確實添加了背景色標籤，但它似乎沒有工作。他們都是這樣您的第一列的內容在這裏爲中間的東西放在這裏等等，等等等等... 這是整個網頁。 – user3219918

我真的想弄明白這一點。這應該是三個彩色的盒子水平放置在它們之間以及三個盒子下面的兩個盒子之間。因此，一個有3列兩行的網格與頁面的cnter對齊。我無法做到三格兩格。你的答案包括所有的文字，而不是我想要的。你可能會做我所問的。謝謝，所有幫助都非常感謝和注意，：D – user3219918

請嘗試此頁http://www.456bereastreet.com/archive/201012/how_to_create_a_3-column_layout_with_css/ – Loopo

三列網格響應

回答

相關問題