一列居中寬度自適應佈局

admin發表於2018-08-06

固定寬度佈局可以參閱一列固定寬度佈局一章節。

下面介紹一下如何實現居中寬度自適應效果，實現原理如下：

（1）.通過width屬性設定元素寬度，值以百分比方式表示，這樣就能隨著父元素的寬度變化。

（2）.然後通過margin:0 auto將元素在其父元素中設定為居中狀態。

程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
body {
  margin: 0;
  padding: 0;
  font-size: 30px;
  font-weight:bold;
}
.head,
.main,
.footer {
  width:80%;
  line-height: 50px;
  margin:0 auto;
  text-align: center;
}
.head {
  height: 100px;
  background: #ccc;
}
.main {
  height: 600px;
  background:#FCC;
}
.footer {
  height: 50px;
  background: #9CF
}
</style>
</head>
<body>
  <div class="head">head</div>
  <div class="main">main</div>
  <div class="footer">footer</div>
</body>
</html>

上面實現了上中下居中寬度自適應佈局效果，更多內容參閱相關閱讀:

（1）.設定寬度參閱CSS 元素尺寸一章節。

（2）.div居中參閱CSS div居中效果一章節。

相關文章