左列定宽,右列自适应

最新推荐文章于 2021-12-13 20:32:40 发布

gtLBTNq9mr3

最新推荐文章于 2021-12-13 20:32:40 发布

阅读量388

点赞数

利用float+margin

HTML代码

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

css代码

#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
margin-left: 100px; /*设置间隔，大于等于#left的宽度*/
}

优点：代码简单；容易理解；兼容性好

缺点：#left的宽度和#right的margin-left需要对应且固定

利用float+margin(fix)

HTML代码

<body>
<div id="left">左列定宽</div>
<div id="right-fix">
<div id="right">右列自适应</div>
</div>
</body>

CSS代码

#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right-fix {
float: right;
width: 100%;
margin-left: -100px; /*正值大于或等于#left的宽度,才能上移一行*/
}
#right{
margin-left: 100px; /*大于或等于#left的宽度,才不会遮挡#left*/
background-color: #0f0;
height: 500px;
}

优点：代码较简单；兼容性好

缺点：相比（1）的方法，多了一个div，多写了一些代码；不容易理解；margin需要对应好

使用float+overflow

HTML代码

<body>
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</body>

CSS代码

#left {
background-color: #f00;
float: left;
width: 100px;
height: 500px;
}
#right {
background-color: #0f0;
height: 500px;
overflow: hidden; /*触发bfc达到自适应*/
}

优点：代码简单；容易理解；无需关注定宽的宽度，利用bfc达到自适应效果

缺点：#right设置margin-left需要大于#left的宽度才有效，或者直接给#left设置margin-right

使用table实现

THML代码

<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>

CSS代码

#parent{
width: 100%;
display: table;
height: 500px;
}
#left {
width: 100px;
background-color: #f00;
}
#right {background-color: #0f0;}
/*利用单元格自动分配宽度*/
#left,#right{display: table-cell;}

优点：代码简单；容易理解；适用于宽度高度未知情况；兼容性好（ie8+）

缺点：margin失效；设置间隔比较麻烦；设置tabl-cell的元素，宽度和高度的值设置百分比无效，需要给它的父元素设置display: table; 才生效；table-cell不感知margin，在父元素上设置table-row等属性，也会使其不感知height；设置float或position会对默认布局造成破坏，可以考虑为之增加一个父div定义float等属性；内容溢出时会自动撑开父元素

使用position实现

HTML代码

<body>

<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

CSS代码

#parent{position: relative;} /*父相*/
#left {
position: absolute; /*子绝*/
top: 0;
left: 0;
background-color: #f00;
width: 100px;
height: 500px;
}
#right {
position: absolute; /*子绝*/
top: 0;
left: 100px; /*值大于等于#left的宽度*/
right: 0;
background-color: #0f0;
height: 500px;
}

优点：容易理解；兼容性好

代码较多；脱离文档流；左边盒子的width需要对应右边盒子的left值

使用flex实现

HTML代码

<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

CSS代码

#parent{
width: 100%;
height: 500px;
display: flex;
}
#left {
width: 100px;
background-color: #f00;
}
#right {
flex: 1; /*均分了父元素剩余空间*/
background-color: #0f0;
}

优点：简单灵活；功能强大

缺点：PC端兼容性不好，移动端（Android4.0+）

使用Grid实现

HTML代码

<body>
<div id="parent">
<div id="left">左列定宽</div>
<div id="right">右列自适应</div>
</div>
</body>

CSS代码

#parent {
width: 100%;
height: 500px;
display: grid;
grid-template-columns: 100px auto; /*设定2列就ok了,auto换成1fr也行*/
}
#left {background-color: #f00;}
#right {background-color: #0f0;}