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

最新推荐文章于 2024-01-16 14:12:34 发布

csdn_杨小彦

最新推荐文章于 2024-01-16 14:12:34 发布

阅读量3.4k

点赞数

分类专栏：笔试和面试总结文章标签： CSS 自适应布局

本文链接：https://blog.csdn.net/qq_27437967/article/details/71036657

版权

笔试和面试总结专栏收录该内容

57 篇文章 2 订阅

订阅专栏

实现下图的布局

需求：左侧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>

csdn_杨小彦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页面布局：左侧自适应，右侧固定

实现下图的布局需求：左侧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-a
复制链接

扫一扫