在网页布局中,以前只考虑了两列、三列的布局方式,但是没有过多的去考虑在两列、三列布局的情况下实现某些自适应的情况;今天遇到这个问题,在这里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>
效果: