CSS之常見三欄佈局

時間  2019-11-10
標籤 css 常見 佈局 欄目 CSS 简体版
原文   原文鏈接

一：Flex三欄佈局html

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .container {display: flex;  }
    .main {flex-grow: 1; height: 250px;background-color:gold;}
    .left {order:-1; flex: 0 1 200px; margin-right: 25px; height: 250px;background-color:red;}
    .right{ flex: 0 1 100px;margin-left: 25px;height:250px;background-color: purple;}
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果以下

 

 二：BFC三欄佈局
<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .left { float: left;height: 200px;width: 100px;   margin-right: 20px;  background-color: red; }
    .right { width: 200px; height: 200px; float: right;margin-left: 20px;  background-color: blue; }   
    .main {  height: 200px;   overflow: hidden; background-color: green; }
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
</body>
</html>
效果以下圖；

三：絕對定位三欄佈局spring

<!DOCTYPE html>
<html lang="en">
<head>
<style>
    .container {  position: relative;  }
    .main {height: 300px;  margin: 0 100px;  background-color:purple;  }
    .left {position: absolute；  width: 100px;    height: 300px;  left: 0;   top: 0;  background-color:springgreen;  }
    .right { position: absolute; width: 100px;height: 300px;background-color: blue;right: 0; top: 0;   }
</style>
</head>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
 
效果以下圖

四：雙飛翼三欄佈局瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
<style>
.content { float: left;width: 100%;}
.main {  height: 200px;  margin-left: 110px; margin-right: 220px;  background-color: green;}
 .left {  float: left; height: 200px;  width: 100px;margin-left: -100%; background-color: red; }
.right {width: 200px;height: 200px; float: right；  margin-left: -200px;  background-color: blue;}   
</style>
</head>
<body>
<div class="content">
<div class="main"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>

雙飛翼佈局是將一個網頁分爲左列，中列和右列三部分效果是：左列和右列寬度恆定，中間列的寬度根據瀏覽器窗口的大小自適應。佈局

優勢：（1）兼容性好，兼容如有主流瀏覽器 flex

           （2）能夠實現內容的優先加載htm

實際佈局中還有其餘許多三欄佈局形式。CSS世界浩瀚無窮！blog

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程