三列网格响应

我是初学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

三列网格响应

回答

相关问题