使用CSS实现两列布局

固定宽度的两列布局

实际上在项目过程中，自适应宽度的两列布局很少使用，基本都是使用固定宽度的两列布局，因此在这里，我们只介绍固定宽度的两列布局如何实现。
固定宽度的两列布局需要将两列包围在一个大的div当中才可实现。将左边的div设置为左浮动，右边的div设置为右浮动即可。

HTML代码：

<!--自适应宽度的两列布局不常使用，一般使用固定宽度的两列布局-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>两列布局</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="div0">
        <div class="div1">
            hello
        </div>
        <div class="div2">
            world
        </div>
    </div>
</body>
</html>

main.css

*{
    padding: 0;
    margin: 0;
}
.div0{
    width: 800px;/*给定一个宽度*/
    height: 400px;/*高度当然可以根据内容自适应，在这里设置为固定值只为结果显示直观*/
    background: #90A3A2;
    margin: 50px auto;/*设置水平居中*/
}
.div1{
    width: 300px;
    height: 400px;
    background: #BB9797;
    float: left;
    text-align: center;
}
.div2{
    width: 500px;
    height: 400px;
    background: #A2A876;
    float: right;/*左边布局设置浮动为left，右边布局设置浮动为right*/
    text-align: center;
}

结果如下：
这里写图片描述

使用CSS实现两列布局

固定宽度的两列布局

悦读