2020年8月25日 00:15:53html教程评论869 views阅读模式

1、宽度自适应两列布局

　　两列布局可以使用浮动来完成，左列设置左浮动，右列设置右浮动，这样就省的再设置外边距了。

　　当元素使用了浮动之后，会对周围的元素造成影响，那么就需要清除浮动，通常使用两种方法。可以给受到影响的元素设置 clear:both，即清除元素两侧的浮动，也可以设置具体清除哪一侧的浮动：clear:left 或 clear:right，但必须清楚的知道到底是哪一侧需要清除浮动的影响。也可以给浮动的父容器设置宽度，或者为 100%，同时设置 overflow:hidden，溢出隐藏也可以达到清除浮动的效果。

　　同理，两列宽度自适应，只需要将宽度按照百分比来设置，这样当浏览器窗口调整时，内容会根据窗口的大小，按照百分比来自动调节内容的大小。

 1 
   DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>宽度自适应两列布局 title>  6 <style>  7 *{margin:0;padding:0;}  8 #herder{  9  height:50px; 10  background:blue; 11 } 12 .main-left{ 13  width:30%; 14  height:800px; 15  background:red; 16  float:left; 17 } 18 .main-right{ 19  width:70%; 20  height:800px; 21  background:pink; 22  float:right; 23 } 24 #footer{ 25  clear:both; 26  height:50px; 27  background:gray; 28 } 29  style> 30  head> 31 <body> 32 <div id="herder">页头 div> 33 <div class="main-left">左列 div> 34 <div class="main-right">右列 div> 35 <div id="footer">页脚 div> 36  body> 37  html>

2、固定宽度两列布局

　　宽度自适应两列布局在网站中一般很少使用，最常使用的是固定宽度的两列布局。

　　要实现固定宽度的两列布局，也很简单，只需要把左右两列包裹起来，也就是给他们增加一个父容器，然后固定父容器的宽度，父容器的宽度固定了，那么这两列就可以设置具体的像素宽度了，这样就实现了固定宽度的两列布局。

 1 
   DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>固定宽度两列布局 title>  6 <style>  7 *{margin:0;padding:0;}  8 #herder{  9  height:50px; 10  background:blue; 11 } 12 #main{ 13  width:960px; 14  margin:0 auto; 15  overflow:hidden; 16 } 17 #main .main-left{ 18  width:288px; 19  height:800px; 20  background:red; 21  float:left; 22 } 23 #main .main-right{ 24  width:672px; 25  height:800px; 26  background:pink; 27  float:right; 28 } 29 #footer{ 30  width:960px; 31  height:50px; 32  background:gray; 33  margin:0 auto; 34 } 35  style> 36  head> 37 <body> 38 <div id="herder">页头 div> 39 <div id="main"> 40 <div class="main-left">左列 div> 41 <div class="main-right">右列 div> 42  div> 43 <div id="footer">页脚 div> 44  body> 45  html>

3、两列居中自适应布局

　　同理，只需要给定父容器的宽度，然后让父容器水平居中。

 1 
   DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>两列居中自适应布局 title>  6 <style>  7 *{margin:0;padding:0;}  8 #herder{  9  height:50px; 10  background:blue; 11 } 12 #main{ 13  width:80%; 14  margin:0 auto; 15  overflow:hidden; 16 } 17 #main .main-left{ 18  width:20%; 19  height:800px; 20  background:red; 21  float:left; 22 } 23 #main .main-right{ 24  width:80%; 25  height:800px; 26  background:pink; 27  float:right; 28 } 29 #footer{ 30  width:80%; 31  height:50px; 32  background:gray; 33  margin:0 auto; 34 } 35  style> 36  head> 37 <body> 38 <div id="herder">页头 div> 39 <div id="main"> 40 <div class="main-left">左列 div> 41 <div class="main-right">右列 div> 42  div> 43 <div id="footer">页脚 div> 44  body> 45  html>