CSS布局 , 单列宽度固定,另一列自适应。

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CSS布局 , 单列宽度固定,另一列自适应。相关的知识,希望对你有一定的参考价值。

CSS布局 ,要求是满屏显示,分成两列显示,其中左边 单列宽度固定,右边一列自适应。能根据不同的显示屏分辨率,右边一列可以占满剩下的屏幕。请问该如何设置。

左边单列固定宽度,如:width:100px;height:auto;
右边一列自适应:width:auto;height:auto;
首先要将body的margin:0px;padding:0px;
参考技术A 如果你设置好浮动了,左边的布局宽度固定,右边的布局宽度设置100%就行了 参考技术B #left
position: absolute;

left: 0px;
top: 0px;

width: 300px;

height: 100%;


#right
width: auto; /*这行可以不写,默认就是auto*/

height: 100%;

margin-left: 300px;

两列自适应布局及三列自适应布局


前端开发页面布局中,常见的页面布局方式有,比如两列布局,左边固定宽度,右边自适应宽度。以及三列布局的时候,两边固定宽度,中间宽度自适应。这样的需求实现方式也很简单,下面介绍一种比较简单的方法。

两栏布局,左边固定宽度,右边宽度自适应。

<body>  <div class="left"></div>  <div class="right"></div> </body>
        html,body{    margin: 0;    padding: 0;   }   .left{    width: 200px;    height: 300px;    background-color: red;    float: left;   }   .right{    height: 300px;    background: yellow;    overflow: hidden;   }

三栏布局,左右两侧固定宽度,中间宽度自适应。

<body>  <div class="left"></div>  <div class="right"></div>  <div class="main"></div> </body>
        html,body{    margin: 0;    padding: 0;   }   .left{    width: 200px;    height: 300px;    background-color: red;    float: left;   }   .right{    height: 300px;    float: right;    width: 200px;    background: green;   }   .main{    height: 300px;    background-color: pink;    overflow: hidden;   }

欢迎转载!


以上是关于CSS布局 , 单列宽度固定,另一列自适应。的主要内容,如果未能解决你的问题,请参考以下文章

css自适应布局(两列自适应布局+三列左右固定中间自适应+三列中间固定左右自适应)

两列自适应布局

css布局的相关几个难点

两列自适应布局及三列自适应布局

两列布局(一列定宽,一列自适应)

简单的CSS网页布局--一二列布局