第三章3_2自适应3列布局

weixin_30535565

于 2017-03-05 07:46:00 发布

阅读量54

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/jiaochengli/p/6504094.html

本文介绍了一种使用HTML和CSS实现的自适应三栏布局方案。该布局将页面分为左、中、右三个等宽区域，并通过浮动元素来达到响应式效果。适用于需要灵活调整布局的网页设计。

第三章3_2自适应3列布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应3列布局</title>
    <style type="text/css">
        body{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 33.33%;
            height: 500px;
            background-color: #ccc;
            float: left;
        }
        .middle{
            width: 33.33%;
            height: 500px;
            background-color: #999;
            float: left;
        }
        .right{
            width: 33.33%;
            height: 500px;
            float: right;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</body>
</html>