两列布局

创建两列布局,float + margin

by Boyanliuu

HTML

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>品字布局</title>

</head>

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

</html>

CSS

* {
     margin: 0;
     padding: 0;
}
 #left {
     background-color: #f00;
     float: left;
     width: 100px;
     height: 500px;
}
 #right {
     background-color: #0f0;
     height: 500px;
     margin-left: 100px;
    /*大于等于#left的宽度*/
}