两栏布局
利用margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.first{overflow: hidden;;margin-top: 50px;color:#fff;}
.first-left{width: 100px;height: 100px;float:left;background: red}
.first-right{margin-left: 100px;height: 100px;background: black;word-wrap: break-word;}
</style>
</head>
<body>
<div class="first">
<div class="first-left"></div>
<div class="first-right"></div>
</div>
</body>
</html>
模仿圣杯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.second{padding-left: 100px;overflow: hidden;margin-top: 50px;color:#fff;}
.second-left{width: 100px;height: 100px;float:left;background: red;margin-left:-100%;position: relative;left:-100px;}
.second-right{float: left;background: black;height: 100px;width: 100%;word-wrap: break-word;}
</style>
</head>
<body>
<div class="second">
<div class="second-right"></div>
<div class="second-left"></div>
</div>
</body>
</html>
利用overflow：hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.third{overflow: hidden;margin-top: 50px;color:#fff;}
.third-left{float:left;width: 100px;height: 100px;background: red}
.third-right{overflow: hidden;background: black;height: 100px;word-wrap: break-word;}
</style>
</head>
<body>
<div class="third">
<div class="third-left"></div>
<div class="third-right"></div>
</div>
</body>
</html>
三栏布局
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.sixth{overflow: hidden;margin-top: 50px;color:#fff;padding: 0 100px}
.sixth-middle{float:left;background: yellow;width: 100%;height: 100px}
.sixth-left{float:left;background: red;width: 100px;height: 100px;margin-left: -100%;position: relative;left: -100px;}
.sixth-right{float:right;background: black;height: 100px;width: 100px;margin-left: -100px;position: relative;right:-100px;}
</style>
</head>
<body>
<div class="sixth">
<div class="sixth-middle"></div>
<div class="sixth-left"></div>
<div class="sixth-right"></div>
</div>
</body>
</html>
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.seventh{overflow: hidden;margin-top: 50px;color:#fff;}
.seventh-middle{width: 100%;height:100px;background: yellow;float: left}
.inner{margin-left: 100px;margin-right:100px}
.seventh-left{width: 100px;height: 100px;float: left;margin-left: -100%;background: red;}
.seventh-right{width: 100px;height: 100px;float: left;margin-left: -100px;background: black;word-wrap: break-word;}
</style>
</head>
<body>
<div class="seventh">
<div class="seventh-middle">
<div class="inner">
</div>
</div>
<div class="seventh-left">left
</div>
<div class="seventh-right">right
</div>
</div>
</body>
</html>
利用flex实现圣杯
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.eighth{display: flex;height: 100px}
.eighth-middle{background: black;flex: 1;color: #fff}
.eighth-left{order:-1;flex: 0 0 50px;background: red;height: 100px}
.eighth-right{flex: 0 0 50px;background: yellow;height: 100px}
</style>
</head>
<body>
<div class="eighth">
<div class="eighth-middle">123
</div>
<div class="eighth-left"></div>
<div class="eighth-right"></div>
</div>
</body>
</html>
一列定高，一列自适应
//一种是用box-sizing，然后marging
html,
body { height:
100%; padding:
0; margin:
0; }
.outer { height:
100%; padding:
100px
0 0; box-sizing: border-box ; }
.A { height:
100px; margin: -
100px
0 0; background:
.B { height:
100%; background:
<
div class=
"outer">
<
div class=
"A"></
div>
<
div class=
"B"></
div>
</
div>
html,
body { height:
100%; padding:
0; margin:
0; }
.outer { height:
100%; padding:
100px
0 0; box-sizing: border-box ; position:
relative; }
.A { height:
100px; background:
.B { height:
100%; background:
body { height:
100%; padding:
0; margin:
0; }
.outer { height:
100%; position:
relative; }
.A { height:
100px; background:
.B { background:
转载请注明原文地址: https://ju.6miu.com/read-350062.html
