<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<h2>多列布局</h2>
<h3>左边定宽+右边自适应</h3>
<!-- <h4>使用float+overflow实现</h4>
<div class='parent parent1'>
<div class='left left1'>
<p>left</p>
</div>
<div class='right right1'>
<p>right</p>
<p>right</p>
</div>
</div>
<h4>使用float+margin实现</h4>
<div class='parent parent2'>
<div class='left left2'>
<p>left</p>
</div>
<div class='right right2'>
<p>right</p>
<p>right</p>
</div>
</div> -->
<!-- <h4>float+margin改良版</h4>
<div class='parent parent3'>
<div class='left left3'>
<p>left</p>
</div>
<div class='right-fix'>
<div class='right right3'>
<p>right</p>
<p>right</p>
</div>
</div>
</div> -->
<h4>使用table实现</h4>
<div class='parent parent4'>
<div class='left left4'>
<p>left</p>
</div>
<div class='right right4'>
<p>right</p>
<p>right</p>
</div>
</div>
</body>
</html>
.parent{
background-color:pink;
}
.left{
background-color:grey;
}
.right{
background-color:red;
}
/* 定宽+自适应 */
/* float+overflow */
.left1{
float:left;
width:100px;
margin-right:20px;
}
.right1{
overflow:hidden;
}
/* float+margin */
.left2{
float:left;
width:100px;
}
.right2{
margin-left:120px;
}
/* float+margin改良版 */
/* .left3{
float:left;
width:100%;
position:relative;
}
.right-fix{
float:right;
width:100%;
margin-left:-100px;
}
.right3{
margin-left:120px;
}
*/