简单的左中右布局
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>左固定，右自适应布局</title>
<style>
.autoLeft {
height: 30px;
width: 200px;
background: red;
}
.autoRight {
height: 30px;
background: blue;
color: #fff;
}
.auto3 {
height: 30px;
width: 200px;
background: orange;
}
.mt-10 {
margin: 10px 0
}
</style>
</head>
<body>
<div class="123">
<h3>布局1，左边float:left，右边margin-left</h3>
<div style="overflow: auto;">
<div class="autoLeft" style="float:left">123</div>
<div class="autoRight" >123</div>
</div>
</div>
<div class="mt-10" style="overflow: auto;">
<div class="autoLeft" style="float:left"></div>
<div class="auto3" style="float:right"></div>
<div class="autoRight" style="margin-left: 200px;margin-right: 200px;">123</div>
</div>
<h3>布局2，display:inline-block,右边宽度clac计算，注意节点中的间隙会导致换行</h3>
<div style="font-size:0">
<div class="autoLeft" style="display: inline-block;"></div>
<div style="width: calc( 100% - 200px );display: inline-block;font-size:14px;vertical-align:top"
class="autoRight">12</div>
</div>
<div class="mt-10" style="font-size:0">
<div class="autoLeft" style="display: inline-block;"></div>
<div style="width: calc( 100% - 400px );display: inline-block;font-size:14px;vertical-align:top"
class="autoRight">123</div>
<div class="auto3" style="display: inline-block;vertical-align:top"></div>
</div>
<h3 style="width: 100%;">布局3，父级节点display:flex,右侧节点flex:1</h3>
<div style="display: flex;">
<div class="autoLeft"></div>
<div style="flex: 1;" class="autoRight">123</div>
</div>
<div class="mt-10" style="display: flex;">
<div class="autoLeft"></div>
<div style="flex: 1;" class="autoRight">123</div>
<div class="auto3"></div>
</div>
<h3 style="width: 100%;">布局4，利用display:table,父节点要设置宽度(学习)</h3>
<div style="display: table;width: 100%;">
<div style="display: table-cell;" class="autoLeft"></div>
<div style="display: table-cell;" class="autoRight">123</div>
</div>
<div class="mt-10" style="display: table;width: 100%;">
<div style="display: table-cell;" class="autoLeft"></div>
<div style="display: table-cell;" class="autoRight">123</div>
<div style="display: table-cell;" class="auto3"></div>
</div>
<h3 style="width: 100%;">布局5，利用display:grid</h3>
<div style="display: grid;grid-template-columns: 200px 1fr">
<div style="display: table-cell;" class="autoLeft"></div>
<div style="display: table-cell;" class="autoRight">123</div>
</div>
<div class="mt-10" style="display: grid;grid-template-columns: 200px auto 200px">
<div style="display: table-cell;" class="autoLeft"></div>
<div style="display: table-cell;" class="autoRight">123</div>
<div style="display: table-cell;" class="auto3"></div>
</div>
<h3>布局6，定位position：absolute</h3>
<div style="position: relative;">
<div class="autoLeft" style="position: absolute;top: 0;left: 0;"></div>
<div class="autoRight" style="margin-left:200px">123123</div>
</div>
</body>
</html>
浙公网安备 33010602011771号