正文
css布局：左边定宽、右边自适应
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
方法一 ： 左边 左浮动，右边 margin-left
*{margin: 0;padding: 0;}
.left{
float: left;
width: 200px;
border: 1px solid #333;
}
.right{
margin-left:200px;
border: 1px solid #333;
}
<!-- 方法一 ： 左边 左浮动，右边 margin-left -->
<div class="left">
<p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>
</div>
<div class="right">
<p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>
</div>
方法二 ：左边绝对定位，右边margin-left
*{margin: 0;padding: 0;}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
border: 1px solid #333;
}
.right{
margin-left:200px;
border: 1px solid #333;
word-break: break-all;
}
<!-- 方法二 ：左边使用绝对定位，右边margin-left -->
<div class="left">
<p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>
</div>
<div class="right">
<p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>
</div>
方法三 ：左边右边两边都使用绝对定位
*{margin: 0;padding: 0;}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
border: 1px solid #333;
}
.right{
position: absolute;
left: 200px;
top:0;
border: 1px solid #333;
}
<!-- 方法三 ：左边右边两边都使用绝对定位 -->
<div class="left">
<p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>
</div>
<div class="right">
<p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>
</div>
方法四 ：左边左浮动，右边 overflow：hidden
*{margin: 0;padding: 0;}
.left{
float: left;
width: 200px;
border: 1px solid #333;
}
.right{
overflow: hidden;
border: 1px solid #333;
}
<!-- 方法四 ：左边左浮动，右边 overflow：hidden -->
<div class="left">
<p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>
</div>
<div class="right">
<p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>
</div>
方法五 ：弹性布局，左边固定宽度，右边flex
*{margin: 0;padding: 0;}
.box{
display: flex;
}
.left{
width: 200px;
border: 1px solid #333;
}
.right{
flex:1;
width: 0;
border: 1px solid #333;
}
<!-- 方法五 ：弹性布局，左边固定宽度，右边flex -->
<div class="box">
<div class="left">
<p>左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左左</p>
</div>
<div class="right">
<p>右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右右</p>
</div>
</div>
源码地址：https://github.com/zuobaiquan/css3/tree/master/左侧定宽右侧自适应
