三列網格響應

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 個解決方案

解決方案1
0 2014-02-08 17:09:14

三列網格響應

問題描述

1 個解決方案

解決方案1 0 2014-02-08 17:09:14

解決方案1
0 2014-02-08 17:09:14