Question

我是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%;
}

Answer 1

你需要重新开始。

基本上你的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;
}

三列网格响应

1 个答案: