CSS實現的網頁柵格佈局簡單介紹

antzone發表於2017-03-24
CSS網頁

柵格佈局在實際應用中非常常見，下面就通過程式碼例項簡單演示一下它的作用。

有需要的朋友可以做一下參考，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
section{
  border:solid 1px;
}
section section{
  float:left;
  margin-left:10px;
  margin-top:10px;
  text-align:center;
  width:200px;
  border-radius:20px;
  height:200px;
}
.parent{
  height:440px;
  width:660px;
}
.parent section:first-child{
  height:410px;
}
</style>
</head>
<body>
<section class="parent">
  <section>A</section>
  <section>B</section>
  <section>C</section>
  <section>D</section>
  <section>E</section>
</section>
</body>
</html>

上面的程式碼實現格柵化佈局效果，原理非常的簡單，主要利用了float屬性。

當然我們也可以使用其他方式實現，下面就分享一段使用display:flex實現的效果

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
section{
  border:solid 1px;
}
section section{
  margin-left:10px;
  margin-top:10px;
  text-align:center;
  width:200px;
  border-radius:20px;
  height:200px;
}
.parent{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  height:440px;
  width:660px;
}
.parent section:first-child{
  height:410px;
}
</style>
</head>
<body>
<section class="parent">
  <section>A</section>
  <section>B</section>
  <section>C</section>
  <section>D</section>
  <section>E</section>
</section>
</body>
</html>

上面的程式碼實現了我們的要求，程式碼也比較簡單，更多內容可以參閱相關閱讀。

相關閱讀:

（1）.float屬性可以參閱CSS清除float浮動詳解一章節。

（2）.border-radius可以參閱CSS3實現圓角效果一章節。

（3）.display:flex可以參閱display:flex用法簡單介紹一章節。

（4）.flex-direction可以參閱flex-direction用法簡單介紹一章節。

（5）.flex-wrap可以參閱flex-wrap用法簡單介紹一章節。

相關文章