左边固定，右边自适应的布局（尽可能多的方法） #5
Comments
|
阿里巴巴淘系技术出品之网页布局 |
|
还有实现中间自适应，两边固定等一系列 |
|
中间固定，左右自适应 //1.float方法。这个方法中间的盒子必须放在左右盒子的下面
<body>
<div class="left"></div>
<div class="right"></div>
<div class="center">center</div>
</body>
style{
.left {
width: 200px;
height: 500px;
background-color: #ccc;
float: left;
}
.center {
height: 500px;
background-color: royalblue;
}
.right {
width: 200px;
height: 500px;
background-color: red;
float: right;
}
}
//2.position方法。给所有盒子都绝对定位，都脱离文档流
<body>
<div class="left"></div>
<div class="center">center</div>
<div class="right"></div>
</body>
<style>
.left {
width: 200px;
height: 500px;
background-color: #ccc;
position: absolute;
left: 0;
}
.center {
height: 500px;
background-color: royalblue;
position: absolute;
left: 200px;
right: 200px;
}
.right {
width: 200px;
height: 500px;
background-color: red;
position: absolute;
right: 0;
}
//3.flex。给中间部分flex:1
<body>
<div class="container">
<div class="left"></div>
<div class="center">center</div>
<div class="right"></div>
</div>
</body>
<style>
.container{
display: flex;
}
.left {
width: 200px;
height: 500px;
background-color: #ccc;
}
.center {
height: 500px;
background-color: royalblue;
flex: 1;
}
.right {
width: 200px;
height: 500px;
background-color: red;
}
</style>
//4.网格grid。直接设置子网格的样式
<div class="container">
<div class="left"></div>
<div class="center">11</div>
<div class="right"></div>
</div>
<style>
.container{
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 500px;
}
</style> |
|
左边固定，右边自适应 /* 基础框架*/
<div class="container">
<div class="box1">111</div>
<div class="box2">222222222222222222222
</div>
</div>
.box1{
width:300px;
height: 600px;
}/* 1.float。记得加padding-left */
.box1{
float: left;
}
.box2{
width: 100%;
height: 600px;
padding-left: 300px;/*左盒子的宽度*/
}
/* 2.position */
.container{
position: relative;
}
.box2{
position: absolute;
height: 600px;
top: 0;
left: 300px;
right: 0;
}
/* 3.flex。无需其他设置 */
.container{
display: flex;
}
.box2{
flex-grow: 1;
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
写左边固定300px，右边自适应的布局。
有可能会连带着双飞翼和圣杯布局一起问（百度问了，字节没问）
The text was updated successfully, but these errors were encountered: