html, body {margin: 0padding: 0}
.all{ width:100% height:100%}
.left{ width:100px float:left background:#990 height:100%margin-left: -100%}
.right{ width:100% background:#F90 height:100% float:left}
.right_in{ margin-left:100px height:100% }
</style> <div class="all">
<div class="right">
<div class="right_in"> 内容</div>
</div>
<div class="left">我是固定的</div>
</div>
这样就可以让右侧的宽度自适应,左侧的宽度固定。
原理:
先让右侧的宽度定义为100%;里面的right_in的左边距等于左边固定宽度的尺寸.
写一个小例子给你看看,你就明白了
html内容如下
<div class="left">左边的内容</div><div class="right">
<div class="right_content">右边的内容</div>
</div>
css内容如下:
.left{width:200pxfloat:leftmargin-right:-200pxbackground: #00ca57}.right{width:100%float:left}
.right_content{margin-left:200pxbackground: #269abc}
完美实现,请采纳~!
2列布局,左侧定宽,右侧宽度为100%,就能自适应。
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局</title>
<style>
.container {
width: 80%
height: 600px
border: 10px solid lightslategray
margin: 0 auto
}
.left,.right {
/* 将块级元素呈现水平方向的排列效果 */
float: left
}
.left {
/* 定宽 - 宽度值确定不变的 */
width: 25%
height: 600px
background-color: lightcoral
}
.right {
width: 75%
height: 600px
background-color: lightseagreen
}
</style>
</head>
<body>
<!-- 容器 -->
<div class="container">
<!-- 两列 - 定宽 -->
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
贴一种给你,我这边有6种实现方法。