html5+css 三列布局

来源：互联网发布：乐清市知临中学编辑：程序博客网时间：2024/06/05 02:05

<!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>

这里写图片描述

0 0