Css 三柱网格响应_Css_Html_Layout_Grid

Css 三柱网格响应

css html layout grid

Css 三柱网格响应,css,html,layout,grid,Css,Html,Layout,Grid,我是HTML和CSS的初学者。我对javascript有一些了解，不是jquery，还有响应式设计所以我想做一个3列的网格，对齐中心，每个都有33.33%的宽度。在水平方向和两侧各留出一点空间。但我可以把它对准中心。这是我的html。我也希望它能做出响应。它应该减少到两列，然后减少到一列，诸如此类。我怎样才能做到这一点这是我的HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

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

你需要重新开始

基本上，html结构需要反映3列布局。通常这是通过

标记实现的

比如：

<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>

现在，我希望它是6个彩色框，3列，2行，以及它们之间的空格，内容div与中心对齐。我确实添加了背景色标签，但它似乎不起作用。它们都是这样的你的第一栏内容在这里中间的东西在这里等等等等。。。这是整个网页。我真的很想弄清楚。这应该是水平的三个彩色框，它们之间有间距，三个框下面有两个框。因此，一个3列两行的网格与页面的中心对齐。我做不到三乘二的网格。你的答案包括所有的文字，不是我想要的。你能照我说的做吗。谢谢，非常感谢并注意到所有帮助：：t请阅读此页

<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>

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