页面布局：左侧自适应，右侧固定

来源：互联网发布：linux查看进程被占用编辑：程序博客网时间：2024/05/03 06:58

实现下图的布局

需求：左侧content自适应，右侧固定200px宽度并并列显示。
这里写图片描述

css代码

 <style type="text/css">        *{margin:0px; padding:0px;overflow:hidden;}        header{margin:5px;width:98%;padding:6px;border:1px solid green;text-align:center;}        .container{margin:5px;width:99%;overflow:hidden;}        .left{         float:left;         width:100%;        }        .content{          height:300px;          margin-right:210px;          border:1px solid purple;        }        .right{         float:left;         width:200px;         border:1px solid pink;         margin-left:-202px;        }        footer{margin:5px;width:98%;padding:6px;border:1px solid #000;text-align:center;}         </style>

html 代码

<body>        <header>我是header</header>        <div class="container">           <div class="left">               <div class="content">content-自适应宽度</div>           </div>           <div class="right">               aside-200px固定宽度           </div>        </div>        <footer>footer</footer></body>

还有一种方法实现左侧自适应，右侧固定宽度：

将右侧div设置float:right;width:200px;
设置左侧div的margin-right:200px;

切记在html中右侧的div位置在左侧的div之前

css样式.container{margin:5px;width:98%;}.left{margin-right:200px;border:1px solid purple;height:300px;}.right{float:right;width:200px;height:auto;border:1px solid #000;}html代码<!--div class="right"的div必须设置在div class="left"之前，否则div class="right"的div将换行显示---->   <div class="right">    aside-宽度200px    </div>     <div class="left">      content-自适应宽度      </div></div>

0 0