10 圣杯布局、 双飞翼布局、假等高、真等高、图片优化
10 圣杯布局、 双飞翼布局、假等高、真等高、图片优化
多栏布局解决方案
-
圣杯布局
-
1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析
-
2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度 -
3.大盒子加左右padding，左右部分用定位定位到相应的位置。 - 缺点：当缩小到中间部分小于左侧宽度时，布局混乱。
-
双飞翼布局
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.center {
width: 100%;
height: 400px;
background-color: gold;
float: left;
}
.left {
width: 200px;
height: 400px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 300px;
height: 400px;
background-color: blue;
float: left;
margin-left: -300px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.inner {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<!--
双飞翼布局实现：
1.一个大盒子，里面有三个小盒子，左右固定，中间自适应100%，中间部分一定要先解析
2.三个盒子加浮动，左侧部分设置margin-left:-100%;右侧部分设置margin-left:-自己本身宽度
3.中间部分内部嵌套一个标签，加左右的外边距
缺点：相对于圣杯布局，增加一层结构代码
-->
<div class="wrap clearfix">
<div class="center">
<div class="inner">
center
</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
</html> -
假等高
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.wrap {
border: 5px solid #000;
width: 900px;
margin: 0 auto;
}
.box1 {
width: 300px;
background-color: red;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box2 {
width: 300px;
background-color: green;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.box3 {
width: 300px;
background-color: blue;
float: left;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
.wrap {
overflow: hidden;
}
</style>
</head>
<body>
<!-- 内外边距相消法：内边距设置特别大，外边距设置特别小,父标签加溢出隐藏，overflow:hidden; -->
<div class="wrap clearfix">
<div class="box1">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</body>
</html> -
真等高
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.a {
width: 900px;
background-color: blue;
border: 3px solid #000;
margin: 0 auto;
overflow: hidden;
}
.b {
width: 900px;
background-color: green;
margin-left: -300px;
}
.c {
width: 900px;
background-color: red;
margin-left: -300px;
}
.box1 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box2 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.box3 {
width: 300px;
float: left;
position: relative;
left: 600px;
}
.clearfix:after {
content: '';
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="a">
<div class="b">
<div class="c clearfix">
<div class="box1">
1先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box2">
2先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
<div class="box3">
3先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
</div>
</div>
</div>
</div>
</