css佈局總結
阿新 • • 發佈：2019-02-04
三欄式佈局任務要求是完成如下圖所示佈局：
有兩種方案可實現任務要求的效果：
1、利用float實現浮動佈局
首先需要定義父元素的寬高，不定義也可以，不過這樣會影響同級兄弟元素的佈局，建議定義父元素寬高。
.container{
margin: 2%;
height: 500px;
border: 1.5px solid rgba(37, 74, 86, 0.68);
}對每個子元素加上float: left;保證所有子元素浮動佈局，並脫離文件流。
.container__left{
float: left;
width: 200px;
height 值得注意的是，如何讓中間內容區域實現自適應寬度，這裡運用了width: calc(100% - 440px) 語句，440px是左右兩邊局域寬度和與中間局域間距的總和，這樣就可以實現定寬自適應佈局。
2、利用position定位實現佈局
首先對父元素設定position: relative，作為絕對定位的參考物，然後在子元素中設定position: absolute。
.container{
position: relative;
margin: 2%;
height: 500px;
border: 1.5px solid rgba(37, 74, 86, 0.68);
}
.container__left{
position: absolute;
left: 20px;
top:20px;
width: 200px;
height 這種設計方法如同PS中畫布和圖層之間的關係，每個圖層就像玻璃板一樣一層一層疊加在畫布上，這種利用position定位實現佈局的方法經常用在輪播圖和文字疊在圖片上方的場景中。
優劣比較：
方法1只需在子元素上設定float即可，但有時需要清除浮動，且相容性較差；
方法2需在父元素和子元素中設定position: relative和position: absolute，但層級結構單一，相容性較好，適合整體佈局。
完整程式碼如下圖所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Team</title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/test1-3.css">
</head>
<body>
<div class="container">
<div class="container__left">
<img src="./images/findlab.PNG" class="container__left__logo">
<div class="container__left__title">FIND--findlab</div>
</div>
<div class="container__content">
<h2 class="container__content__title"><abbr title="future information network&Data">FIND</abbr> --findlab 實驗室</h2>
<p class="container__content__text">finlab實驗室成立於2009年，坐落在廣東工業大學工學2號館404，是一所環境優美，文化濃厚，面向世界和未來的智慧科技實驗室。</p>
<p class="container__content__text">實驗室設立4個獨立小組，分別為公交組、大資料組、機器人組以及區塊鏈組。公交組業務範圍涉及公交wifi平臺搭建、軟體技術攻關以及運營維護等，目前已與多家客運公司合作，在花都至龍崗等線路的客運車上安置客運雲盒，讓使用者在旅途中享受娛樂資訊、免費wifi等服務，上市以後受到廣泛好評。大資料組主要負責學習和專研各種可行演算法，在實際問題中尋找可行的方案，組內成員多次參加各類平臺比賽，並取得優異成績。機器人組面向人工智慧，目前做過的實驗有機械手動作模擬，語音互動，視覺捕獲等工作，先與企業合作，提供語音互動技術攻關。區塊鏈組是2017年成立的小組，屬於雛形期，由於最近網路安全，區塊鏈技術的興起，使得我們有展開深入探討的必要性。雖然4個小組相互獨立，但有可相互交叉合作，共同進步。</p>
<p class="container__content__text">未來是不可預知的，是瞬息萬變的，我們面向未來，追趕未來，但不畏懼未來。findlab實驗室總是與時俱進，在科技不斷髮展的前沿中學習挖掘可用價值，比如新成立的區塊鏈小組。我們堅信未來一定是屬於我們的。 </p>
</div>
<div class="container__right">
<img src="./images/公交wifi.jpg" class="container__right__img">
<img src="./images/大資料.jpg" class="container__right__img">
<img src="./images/人工智慧.jpg" class="container__right__img">
<img src="./images/區塊鏈.jpg" class="container__right__img">
</div>
</div>
</body>
</html>.container__left,
.container__content,
.container__right{
border: 1px solid rgba(147, 147, 81, 0.68);
}
.container{
position: relative;
margin: 2%;
height: 500px;
border: 1.5px solid rgba(37, 74, 86, 0.68);
}
.container__left{
position: absolute;
left: 20px;
top:20px;
width: 200px;
height: 200px;
}
.container__left__logo{
display: block;
margin: 10% auto ;
width: 50%;
height: 50%;
}
.container__left__title{
text-align: center;
font-size: 24px;
}
.container__content{
position: absolute;
left: 240px;
top:20px;
height: 460px;
width: calc(100% - 440px) ;
}
.container__content__title{
margin-left: 20px;
font-size: 24px;
color: #333333;
}
.container__content__text{
margin:0 20px 14px;
line-height: 24px;
}
.container__right{
position: absolute;
right: 20px;
top:20px;
width: 160px;
height: 460px;
}
.container__right__img{
display: block;
width: 100px;
height: 100px;
margin: 10px 30px;
}