两栏布局

来源：互联网发布：淘宝中青旅怎么样编辑：程序博客网时间：2024/05/20 01:37

<!DOCTYPE html><html lang="zh-cn">  <head>    <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title>两栏布局</title>    <style>      *{margin:0;padding:0;}      /*****************************************方法一 固定高度**************************************/      /*.left {float:left;width:200px;background-color:#ff0;height:500px;}      .right {background-color:#f00;height:500px;margin-left:210px;}*/       /*****************************************方法二 高度占满父元素**************************************/      .left{position:absolute;top:0;left:0;bottom:0;width:200px;background-color:#ff0;height:100%;}      .right{position:absolute;top:0;bottom:0;left:210px;right:0;background-color:#f00;height:100%;}    </style>  </head>  <body>       <div class="left"></div>       <div class="right"></div>  </body></html>

0 0