使用CSS实现两列布局

来源：互联网发布：金融超市源码编辑：程序博客网时间：2024/05/19 22:58

固定宽度的两列布局

实际上在项目过程中，自适应宽度的两列布局很少使用，基本都是使用固定宽度的两列布局，因此在这里，我们只介绍固定宽度的两列布局如何实现。
固定宽度的两列布局需要将两列包围在一个大的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;}

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

阅读全文

0 0