css两列布局，一边固定宽度，另一边自适应
Posted 雨中的鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了css两列布局，一边固定宽度，另一边自适应相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<HTML>
<head>
<meta charset="utf-8" />
<title>css两列布局，一边固定宽度，另一边自适应</title>
</head>
<style>
a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{
margin: 0;
border: 0;
padding: 0;
font-style: normal;
color: #323232;
box-sizing: border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
.right{
width:200px;
float:right;
border:1px solid black;
height:auto;
min-height: 200px;
}
.left{
width:auto;
border:1px solid red;
margin-right:200px;
height:auto;
min-height: 200px;
}
.left1{
float:left;width:200px;border:1px solid red;height:auto;min-height: 200px;
}
.right1{
height:auto;border:1px solid blue;width:auto;margin-left:200px;min-height: 200px;
}
</style>
<body>
<div>
<div class="right">右边固定</div>
<div class="left">左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应左边自适应
</div>
</div>
<div style="margin-top: 10px;">
<div class="left1">
左边固定
</div>
<div class="right1">
右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应右边自适应
</div>
</div>
</body>
</HTML>
以上是关于css两列布局，一边固定宽度，另一边自适应的主要内容，如果未能解决你的问题，请参考以下文章
如何通过 CSS 实现一个左边固定宽度 右边自适应的两列布局