css實現三欄佈局的三種方式（附程式碼）-css教學-PHP中文網

首頁

web前端

css教學

css實現三欄佈局的三種方式（附程式碼）

不言

Aug 09, 2018 am 11:15 AM

三欄佈局

這篇文章要跟大家介紹的內容是關於css實現三欄佈局的三種方式（附程式碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

浮動佈局

分成三個div，另一個父級包含這三個div，使用float，

注意點：三個div，left --> right ---> center 這種順序

<!DOCTYPE html>
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>Title</title> 
<style type="text/css"> 
body {
   margin: 0;   
   padding: 0; 
   } 
    .left {   
             float: left;   
             width: 300px;   
             height: 100px;   
             background-color: red; 
         } 
     .right {   
            float: right;    
            width: 300px;   
            height: 100px;   
            background-color: blue; 
           } 
      .center {
               margin: 0px 300px 0px 300px;   
               background-color: black;   
               height: 100px; 
              } 
</style> 
</head> 
<body> 
<div class="father"> 
<div class="left">1</div> 
<div class="right">2</div> 
<div class="center">3</div> 
</div> 
</body> 
</html>

#Flex

設定中間盒子FLex：1，這樣的話就可以實現自適應，預設水平排列

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
  display: flex;
}
.left {
  width: 300px;
  height: 100px;
  background-color: red;
}
.center {
  flex:1;
  height: 100px;
  background-color: black;
}
.right {
  width: 300px;
  height: 100px;
  background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div> 
</body>
</html>

flex相關知識點，一般會使用到的

#1、設定display：flex

2、容器圖：

軸：水平main axis和垂直cross axis

3、容器的屬性

flex-direction：主軸的方向，row | row-reverse | column | column-reverse;

flex-wrap：換行， nowrap | wrap | wrap-reverse;

flex-flow：flex-direction和flex-wrap簡寫

justify-content：主軸上的對齊方式， flex-start | flex-end | center | space-between | space-around;

align-items：交叉軸上如何對齊，flex-start | flex-end | center |strcenter |

##絕對定位對齊

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
  background-color: red;
  position: absolute;
  left: 0;
  width: 300px;
  height: 100px;
}
.two {
  left: 300px;
  right: 300px;
  background-color: blue;
  position: absolute;
  height: 100px;
}
.three {
  right: 0px;
  width: 300px;
  background-color: yellow;
  position: absolute;
  height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div> 
</body>
</html>

相關文章推薦：

設計前端網頁頁面時,怎麼讓導覽列居中對齊? （程式碼實測）

CSS佈局有哪些？ css常見的佈局方式（附程式碼）#

以上是css實現三欄佈局的三種方式（附程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn