html5+css 三列布局

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/baidu_32731497/article/details/51864388
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>三列布局</title>
    <style type="text/css">
        body{
            margin:0;
            padding:0;
        }
        .left{
            width:188px;
            height:200px;
            background:red;
            position:absolute;
            left:0;
            top:0;
        }
        .right{
            width:200px;
            height:260px;
            background:blue;
            position:absolute;
            right:0;
            top:0;
        }
        .mid{
            height:220px;      /*此处不设置宽度,当缩小宽度时,内容会自动换行;*/
            background:purple;
            margin:0 200px 0 188px;
        }
    </style>
</head>
<body>
    <div class="left"></div>
    <div class="mid">gdfgdgggggggggggggggggggggghfg打得过烦得很gggggggggg</div>
    <div class="right"></div>
</body>
</html>

这里写图片描述

展开阅读全文

没有更多推荐了,返回首页