三栏网页宽度自适应布局方法

最新推荐文章于 2020-05-19 11:31:45 发布

梦颖飞燕

最新推荐文章于 2020-05-19 11:31:45 发布

阅读量341

点赞数

分类专栏： CSS3

本文链接：https://blog.csdn.net/sinat_27346451/article/details/73201016

版权

CSS3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、绝对定位法

html片段如下：

<div id="left">left</div>  
<div id="main">main</div>  
<div id="right">right</div>

css片段如下：

html,body{padding:0;margin:0;} 
#left,#right{position:absolute;top:0;width:190px;height:200px;}
#left{left:0;background-color: #0000FF;}  
#main{margin:0 200px;background-color: #ccc;height:200px;}  
#right{right:0;background-color: #FF0000;}



思路：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。

二、双飞翼布局



HTML片段如下：
   <div id="wrap">
     <div id="main" class='col'>
	<div class="mainIn">main</div>
     </div>
    <div id="left" class='col'>left</div>
    <div id="right" class='col'>right</div>
  </div>
注意：主体main放置在最前面可以优先加载。mainln是为了处理main中内容的遮盖问题，只需设置它的左右外边距即可解决。




CSS片段如下：
	.col {float: left;height: 400px;}
	#main {width: 100%;background-color: #ccc;}
	.mainIn{margin: 0 150px 0 190px;}
	#left {width: 190px;margin-left: -100%;background-color: #0000FF;}
	#right {width: 150px;margin-left: -150px;background-color: #FF0000;}


三、圣杯布局




HTML片段如下：

 
 
  
    <div id="wrap">
    <div id="main" class='col'>main</div>
    <div id="left" class='col'>left</div>
    <div id="right" class='col'>right</div>
  </div>

  
  
CSS片段如下：

  
  	#wrap{padding: 0 150px 0 190px;}
	.col{position: relative;float: left;}
	#main{width: 100%;height: 400px;background-color: #ccc;}
	#left{width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}
	#right{width: 150px;height: 400px;margin-left: -150px;right: -150px;background-color: #FF0000;}
  
  两种布局的相同：三个col都设置float:
 left,为了把left和right定位到左右部分，采用负边距，left部分margin-left:
 -100%，right部分margin-left: -150px。 
  
  


  
  两种布局的区别：相比圣杯布局，双飞翼不必设置左右栏的position:
 relative，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin。
 
 
圣杯布局和双飞翼布局的中间栏要放在文档流前面以优先渲染。



四、flex布局实现上面的效果

 <div id="wrap">
    <div id="left" class='col'>left</div>
    <div id="main" class='col'>main</div>
    <div id="right" class='col'>right</div>
 </div> 
 #wrap{display:flex;}
.col{height:400px;}
#left{width: 190px;background-color: #0000FF;}
#main{flex:1;background-color: #ccc;}
#right{width: 150px;background-color: #FF0000;}



四种布局得到的效果：