网页布局-左侧固定,右侧自适应

时间:2022-04-09 13:59:57

在网页布局中,以前只考虑了两列、三列的布局方式,但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况;今天遇到这个问题,在这里mark一下;

 
方法一:左侧元素浮动或者绝对定位的方式脱离文档流,让两个块级元素能够在同一行显示。然后margin-left的值设置为左侧元素的宽度;在这里利用了div的一个默认规则,div没有设置宽度的情况下会继承父元素的宽度;如果用p等其他标签达不到此效果;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.box1{float: left;width: 300px;height: 150px;background: red;}
.box2{margin-left: 300px;background: blue;height: 150px;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

 

效果图:
网页布局-左侧固定,右侧自适应
  网页布局-左侧固定,右侧自适应

 

 
 
 方法二:利用BFC(块级格式化上下文)来防止蚊子环绕的原理来实现;BFC就是一个相对独立的布局环境,它内部元素的布局不受外面布局的影响,它可以通过多种方式来创建:
1.float不为none;
2.position不为static或者relative;
3.display为table-cell,table-caption,inline-block,flex或者inline-flex中的其中一个都可;
4.overflow不为visible;
 
关于BFC,W3C等资料是这样描述的:在BFC中,每个盒子的左外边框紧挨着包含块的左边框(从右到左的格式化时,则为右边框紧挨)。即使在浮动里也是这样的(尽管一个包含块的边框会因为浮动而萎缩),除非这个包含块的内部创建了一个新的BFC。这样,当我们给右侧的元素单独创建一个BFC时,它将不会紧贴在包含块的左边框,而是紧贴在左边框的右边框;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.box1{float: left;width: 300px;height: 150px;background: red;}
.box2{background: yellow;height: 150px;overflow: auto;}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>

效果:

网页布局-左侧固定,右侧自适应

 

网页布局-左侧固定,右侧自适应
 注:在测试过程中遇到一个问题,去掉box2的overflow:auto;属性,右侧的div也能达到自适应的效果。自适应的盒子是否需要在设置BFC还有待更一步确认;
 
方法三:利用display:table;的方式实现;父元素设置display:table;宽度100%,左右盒子设置display:table-cell;,左侧固定的盒子设置宽高,右侧自适应的盒子设置高度即可;
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style type="text/css">
.box{display: table;width: 100%;}
.box1{width: 300px;height: 150px;background: red;display: table-cell;}
.box2{background: green;height: 150px;display: table-cell;}
</style>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div>
</body>
</html>

 

效果:
网页布局-左侧固定,右侧自适应
  网页布局-左侧固定,右侧自适应