左列定宽,右列自适应

利用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;}

优点：灵活划分网格区域；新型布局利器，适用于页面三维布局

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

来源：https://github.com/Sweet-KK/css-layout

作者：Sweet-KK

左列定宽,右列自适应相关推荐

关于某题左列定宽右列宽度自适应布局的学习
今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来... 题目如下: 已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局? <div c ...
CSS使用浮动属性和边距设计3行3列定宽的布局实例
CSS使用浮动属性和边距设计3行3列定宽的布局下面使用CSS的浮动属性和边距属性设计一个简单地3行3列并且是固定宽度的布局页面. 实例设计步骤如下: 1. 制作3行3列定宽布局的XHTML部分.源 ...
background背景图片自适应_一侧定宽、一侧自适应，尽量多的方案实现？「前端剑指offer」...
# 问题一侧定宽.一侧自适应,尽量多的方案实现. # 回答有下面几种方案能实现一侧定宽一侧自适应. 使用flex布局,这也是目前主流方式.父容器设置display:flex,定宽字元素设置flex ...
html 左边距自适应,左边定宽，右边自适应布局的几种方法
实际的页面开发中经常会遇到左边定宽,右边自适应的需求,特别是一些管理系统,比如左边显示信息或操作列表,右边显示详情,如下所示:. 针对这种布局,首先抽象出页面结构如下: 1 2 3 4 5 Docum ...
css高度已知，左右定宽，中间自适应三栏布局
css高度已知,左右定宽,中间自适应三栏布局: <!DOCTYPE html> <html lang="en"> <head><meta ...
两边定宽，中间自适应布局的四种实现方法
1. 浮动法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
两列布局左边定宽，右边自适应
效果图: 代码如下: <html> <head> <title>文章标题</title> <meta http-equiv="Conte ...
Layout两列定宽中间自适应三列布局
最容易理解的一种方法,以中间内容为主体,通过 margin 或者 padding 将两侧撑开,最后用 absolute 定位两侧 html: <div class="container ...
实现两边定宽，中间自适应布局（三栏布局）的七种方法
浮动法 <style type="text/css">html,body{height: 100%;margin: 0;} div{height: 100%;}.lef ...

左列定宽,右列自适应

左列定宽,右列自适应相关推荐

最新文章

热门文章