文章目录
文章参考
flex 方法
左边固定,右边百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
#left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div id="left">
我在左边,width: 200px;
</div>
<div id="right">我在右边,自适应</div>
</div>
</body>
</html>
##为什么不能使用flex-shrink
这里不能用属性,因为左边固定,右边是剩余的百分百,最坏的情况是内容过多恰好撑满,那么只能剩下的只能放大撑满,而不是缩小,如果设置缩小,剩下的最好的情况是内容过多恰好撑满,只要内容不多,就不会撑满
右边固定,左边百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
#left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div id="left">
我在左边,width: 200px;
</div>
<div id="right">我在右边,自适应</div>
</div>
</body>
</html>
两边固定,中间百分百
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#flex{
display: flex;
}
.left{
width: 200px;
}
#right{
background:green;
/*flex:1*/
/*等价于*/
flex-grow: 1;
}
</style>
</head>
<body>
<div id="flex">
<div class="left">
我在左边width: 200px;
</div>
<div id="right">我在右边,自适应</div>
<div class="left">
我在右边width: 200px;
</div>
</div>
</body>
</html>
float + margin-left/right 方法
左侧固定,右侧自适应
<div>
<div style="width: 200px;float: left;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-left: 201px;border: 1px solid blue;">margin-left: 201px</div>
</div>
右侧固定,左侧自适应
<div>
<div style="width: 200px;float: right;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-right: 201px;border: 1px solid blue;">margin-left: 201px</div>
</div>
<div style="color: red">注意:右边的div代码一定要是写在左边代码的上面,float:right代码,注意代码顺序,否则代码不正确</div>
左右固定,中间自适应
<div>
<div style="width: 200px;float: left;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-left: 201px;">
<div style="float: right;width: 200px;border: 1px solid blue;">float: right;width: 200px;</div>
<div style="margin-right: 201px;border: 1px solid green;">margin-right: 201px;</div>
</div>
</div>
<div style="height: 20px;"></div>
<div>
<div style="width: 200px;float: right;border: 1px solid red;">width: 200px;float: left</div>
<div style="margin-right: 201px;">
<div style="float: left;width: 200px;border: 1px solid blue;">float: left;width: 200px;</div>
<div style="margin-left: 201px;border: 1px solid green">margin-left: 201px;</div>
</div>
</div>
圣杯布局
主要是通过padding 来预留左右两边的位置,然后使用左右浮动,设置margin为负值,进入到 padding 区域中
<div class="grail-layout-x">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.grail-layout-x {
padding: 0 100px;
width: 400px;
height: 400px;
.left {
float: left;
margin-left: -100px;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
margin-right: -100px;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
height: 100%;
background-color: #3c9;
}
}
双飞翼布局
左右两边浮动,中间使用 margin: 0 两边距离
来预留出来
<div class="grail-layout-y">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<div></div>
</div>
</div>
.grail-layout-y {
width: 400px;
height: 400px;
.left {
float: left;
width: 100px;
height: 100%;
background-color: #f66;
}
.right {
float: right;
width: 100px;
height: 100%;
background-color: #66f;
}
.center {
margin: 0 100px;
height: 100%;
background-color: #3c9;
}
}