码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-11-22 11:33:36      阅读:363      评论:0      收藏:0      [点我收藏+]

标签:meta   body   style   oat   osi   auto   blog   测试   com   

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

 

效果:
技术分享
 技术分享

 

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

标签:meta   body   style   oat   osi   auto   blog   测试   com   

原文地址:http://www.cnblogs.com/victor5230/p/6088220.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!