css两栏布局

作者: 鸭梨山大哎 | 来源:发表于2017-06-23 22:37 被阅读0次

实现左侧固定，右侧自适应。
思路，布局最关键的是让block元素并排排列，简单用float就行。之后就是画两个矩形就好，也就是写两个width和height。

<!DOCTYPE html>
<style>

html,body{
        height: 100%;/*高度百分百显示*/
}

#left{
    width: 300px;
    height: 100%;/*高度一定要设置，因为布局就一个矩形嘛，两条边都不说怎么画矩形*/
    background-color: #ccc;
    float: left;/* float很重要，否则block元素没法并排排列*/
}
#right{
    height:100%;
    margin-left: 200px;
    background-color: pink;
}
</style>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS布局</title>
</head>
<body>
    <div id="left"></div>
    <div id="right"></div>
</body>
</html>

两栏布局，左侧固定宽度，右侧自适应大小 - 博客频道 - CSDN.NET