這是一片引用別人的文章，因為自己目前掌握還不夠透徹，暫時先學習他寫的文章，待以后清楚了再補回來這篇。
作者：sunny519111
鏈接：http://www.lxweimin.com/p/be7a452bf707
1.左側固定，主要內容自適應
主要運用知識點
- 負邊距 margin-left: -.....；
- 浮動 float:left;
- 填充 padding;
<div class="layout">
<div class="layout_left"></div>
<div class="layout_main"></div>
</div>
css樣式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-left: 210px;
}
.layout_left,.layout_main{
height: 100px;
float: left;
}
.layout_main{
width:100%;
background: red;
}
.layout_left{
width: 200px;
background: green;
margin-left: -210px;
}
對應效果 請點擊,comecomecome.
2. 右側固定左側主要內容自適應
主要運用知識點
- 負邊距 margin-left: -.....；
- 浮動 float;
- 填充 padding;
- 注意相對于左邊固定浮動變成了右浮動相應的負邊距也變成了右
<div class="layout">
<div class="layout_main"></div>
<div class="layout_right"></div>
</div>
css樣式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-right: 210px;
}
.layout_main{
width:100%;
background: red;
height: 100px;
float: left;
}
.layout_right{
float: right;
width: 200px;
height: 100px;
background: green;
margin-right: -210px;
}
對應效果 請點擊,comecomecome.
三欄布局
在傳統的圣杯布局上有一些改動，效果和圣杯布局相似
左右2邊固定，中間內容自適應
主要運用知識點
- 負邊距 margin-left: -.....；
- 浮動 float;
- 填充 padding;
- 注意左右浮動和左右負邊距
<div class="layout">
<div class="layout">
<div class="layout_left"></div>
<div class="layout_main"></div>
<div class="layout_right"></div>
</div>
</div>
css樣式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding: 0 210px;
}
.layout_left,.layout_main{
float: left;
height: 100px;
}
.layout_left{
width: 200px;
margin-left: -210px;
background: red;
}
.layout_main{
width: 100%;
background: #adcdef;
}
.layout_right{
float: right;
width:200px;
height: 100px;
background: #666;
margin-right: -210px;
}
對應效果 請點擊,comecomecome.
2個固定項目都在左邊固定，主要內容在項目右邊自適應
主要運用知識點
- 負邊距 margin-left: -.....；
- 浮動 float;
- 填充 padding;
- 注意左右浮動和左右負邊距
<div class="layout">
<div class="layout_left1"></div>
<div class="layout_left2"></div>
<div class="layout_main"></div>
</div>
css樣式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-left: 420px;
}
.layout_left1,.layout_left2,.layout_main{
float: left;
height: 100px;
}
.layout_left1{
width: 200px;
background: red;
margin-left: -420px;
}
.layout_left2{
width: 200px;
margin-left: -210px;
background: orange;
}
.layout_main{
width: 100%;
background: blue;
}
對應效果 請點擊,comecomecome.
2個固定項目都在右邊固定，主要內容在項目左邊自適應
主要運用知識點
- 負邊距 margin-left: -.....；
- 浮動 float;
- 填充 padding;
- 注意左右浮動和左右負邊距
<div class="layout">
<div class="layout_main"></div>
<div class="layout_right1"></div>
<div class="layout_right2"></div>
</div>
css樣式
.layout:after{
display: block;
content: "";
clear:both;
}
.layout{
padding-right: 420px;
}
.layout_main{
width: 100%;
background: #eee;
height:100px;
float: left;
}
.layout_right1,.layout_right2{
float: right;
height: 100px;
width: 200px;
}
.layout_right1{
background: red;
margin-right: -210px;
}
.layout_right2{
background: blue;
margin-right: -420px;
}
對應效果 請點擊,comecomecome.
下面是我寫的。
借鑒https://blog.csdn.net/baidu_24024601/article/details/52810921?utm_source=blogxgwz0
左右布局
1.左邊固定寬度，右邊自適應
方法：左元素左浮動+右元素元素設置margin-left為左邊元素的寬度（同理可得右固定，左自適應）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#left{
width:300px;
height: 100%;
background: #009f95;
float:left;
}
#right{
margin-left: 300px;
height: 100%;
background: #444444;
}
</style>
</head>
<body>
<div id="left">
left
</div>
<div id="right">
right
</div>
</body>
</html>
