<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>左边固定右边自适应</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
/* //第一:采用浮动元素,当然也得清浮动,左边浮动,
右边用margin-left,看见word-break:break-all了没,
是强制让内容换行,要不就跑远了。 */
/* .container{
overflow: auto;//清除浮动
zoom: 1;
background-color: #7FFFD4
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: #5F9EA0;
word-break: break-all;
}
.right{
margin-left: 200px;
background-color: #FAEBD7;
height: 400px;
word-break: break-all;
} */
/* 第二种:用相对定位,左边用position:absolute,
右边用margin-left,其实跟浮动定位差不多 */
/* .container{
overflow: auto;
zoom: 1;
position: relative;
}
.left{
position: absolute;
width: 200px;
height: 400px;
background-color: #5F9EA0;
word-break: break-all;
}
.right{
height: 400px;
background-color: #FAEBD7;
margin-left: 200px;
word-break: break-all;
} */
/* 第三种:左边和右边都用绝对定位 */
/* .container{
position: relative;
}
.left{
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 400px;
background-color: #5F9EA0;
word-break: break-all;
}
.right{
position: absolute;
top: 0;
left: 200px;
width: 100%;
height: 400px;
background-color: #FAEBD7;
word-break: break-all;
} */
/* 第四种:使用css3的flex盒模型来实现两栏布局 */
/* .container{
display: flex;
flex-direction: row;
}
.left{
width: 200px;
height: 400px;
background-color: #5F9EA0;
word-break: break-all;
}
.right{
flex: 1;//flex-grow:1;
height: 400px;
background-color: #FAEBD7;
} */
/* 第五种 BFC的区域不会与float box重叠。*/
.left{
float: left;
width: 200px;
height: 400px;
background-color: #5F9EA0;
word-break: break-all;
}
.right{
overflow: hidden;
height: 400px;
background-color: #FAEBD7;
word-break: break-all;
}
</style>
</head>
<body>
<div class="container">
<div class="left"><p>2222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</p></div>
<div class="right">right</div>
</div>
</body>
</html>
左边固定右边自适应
最新推荐文章于 2022-07-02 17:10:57 发布