两列布局，读《css那些事儿》
两列布局：
1、两列定宽：
要点：float、width固定、 :after清除浮动。
前提：两列的盒模型宽度相加不能大于父元素的宽度，否则会出现错位现象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：float、width固定、 :after清除浮动。 前提：两列的盒模型宽度相加不能大于父元素的宽度，否则会出现错位现象。-- <style type="text/css"> *{padding:0;margin:0;} .container{width:960px; } .mainbox{width:600px;float:left;background:green;} .sidebox{width:360px;float:right;background:red;} .footer{background:yellow;width:960px;} .container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } </style> </head> <body> <div class="container"> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> <div class="mainbox" id="mainbox"> <h1> mainox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> </div> <div class="footer"> <h1>footer</h1> </div> </body> </html> 两列定宽
2、两列宽度自适应
要点：float、width百分比、 :after清除浮动。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：float、width百分比、 :after清除浮动。--> <style type="text/css"> *{padding:0;margin:0;} .container { width: 100%; background-color: black; margin: 0 auto; } .mainbox { width: 60%; background-color: deepskyblue; float: left; } .sidebox { width: 40%; background-color: palevioletred; float: right; } .footer { background-color: green; } /*使用伪类的方法清除浮动对footer造成的影响*/ .container:after{ content:""; font-size:0; line-height:0; display:block; visibility:hidden; clear:both; } </style> </head> <body> <div class="container"> <div class="mainbox"> <h1> mainbox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p></div> <div class="sidebox"><h1>sidebar</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p></div> </div> <div class="footer"><h1>footer</h1></div> </body> </html> 两列自适应
3、左侧定宽，右侧自适应
要点：浮动、定位、负边距效果 :after清除浮动：
问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决-->
<!-- 左侧定宽，右侧自适应，
1、左侧设置固定宽度，右侧设置宽度为100%（宽度不能设置为auto，必须设置为100%），
2、左右侧分别设置浮动。
3、设置包裹块为相对定位position:relative，左侧为绝对定位position:absolute，定位位置为left:0;top:0 （注意是定宽的列设置定位）
4、右侧设置margin-right为负值，值等于左侧固定宽度值
-->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：浮动、定位、负边距效果 :after清除浮动： 问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决--> <!-- 左侧定宽，右侧自适应， 1、左侧设置固定宽度，右侧设置宽度为100%（宽度不能设置为auto，必须设置为100%）， 2、左右侧分别设置浮动。 3、设置包裹块为相对定位position:relative，左侧为绝对定位position:absolute，定位位置为left:0;top:0 （注意是定宽的列设置定位） 4、右侧设置margin-right为负值，值等于左侧固定宽度值 --> <style type="text/css"> *{padding:0;margin:0;} .container{position:relative;} .sidebox{width:200px;background:red;position:absolute;left:0;top:0;} .mainbox{width:100%;float:right;margin-right:-200px;background:green;} .footer{background:yellow;} .container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } </style> </head> <body> <div class="container"> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> <div class="mainbox" id="mainbox"> <h1> mainox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> </div> <div class="footer"> <h1>footer</h1> </div> <!--增加js代码实现两列等高--> <script type="text/javascript"> var mh = document.getElementById('mainbox'); var sh = document.getElementById('sidebox'); if (mh.clientHeight < sh.clientHeight) { mh.style.height = sh.clientHeight + "px"; } else { sh.style.height = mh.clientHeight + "px"; } </script> </body> </html> 左侧定宽，右侧自适应
4、左侧自适应，右侧定宽
要点：浮动、定位、负边距效果 :after清除浮动：
问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决
<!--
左侧自适应，右侧定宽.
1、右侧设置固定宽度，左侧设置宽度为100%（宽度不能设置为auto，必须设置为100%），
2、左右侧分别设置浮动。
3、设置包裹块为相对定位position:relative，右侧为绝对定位position:absolute，定位位置为left:0;top:0 （注意是定宽的列设置定位）
4、左侧设置margin-right:200px,距离右侧留有200px空白; 右侧设置margin-left:-200px，设置负边距使sidebox向左侧浮动缩进; -->
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--要点：浮动、定位、负边距效果 :after清除浮动： 问题：当sideBox的内容很多时，使用绝对定位导致无法撑开父元素的高度，而且会覆盖其他元素的内容。解决方案是使用javascript重新判断父元素的高度来解决--> <!-- 左侧自适应，右侧定宽. 1、右侧设置固定宽度，左侧设置宽度为100%（宽度不能设置为auto，必须设置为100%）， 2、左右侧分别设置浮动。 3、设置包裹块为相对定位position:relative，右侧为绝对定位position:absolute，定位位置为left:0;top:0 （注意是定宽的列设置定位） 4、左侧设置margin-right:200px,距离右侧留有200px空白; 右侧设置margin-left:-200px，设置负边距使sidebox向左侧浮动缩进; --> <style type="text/css"> *{padding:0;margin:0;} .container{position:relative;} .mainbox{width:100%;float:left;background:green;margin-right:200px;} .sidebox{width:200px;background:red;margin-left:-200px;position:absolute;right:0;top:0;} .footer{background:yellow;} .container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } </style> </head> <body> <div class="container"> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> <div class="mainbox" id="mainbox"> <h1> mainox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> </div> <div class="footer"> <h1>footer</h1> </div> <!--增加js代码实现两列等高--> <script type="text/javascript"> var mh = document.getElementById('mainbox'); var sh = document.getElementById('sidebox'); if (mh.clientHeight < sh.clientHeight) { mh.style.height = sh.clientHeight + "px"; } else { sh.style.height = mh.clientHeight + "px"; } </script> </body> </html> 左侧自适应，右侧定宽
5、两列优化-一列定宽，一列自适应
要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、js实现等高
原理:是mainbox的浮动并将其宽度设置为100%，将其中的.content设置默认宽度值（auto），margin右所留的空白等于sidebox宽度，再利用负边距原理将侧边栏“引”到主要内容的两边。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!-- 要点：浮动、负边距效果、mainbox增加内容div并设置margin、:after清除浮动、js实现等高 原理:是mainbox的浮动并将其宽度设置为100%，将其中的.content设置默认宽度值（auto），margin右所留的空白等于sidebox宽度，再利用负边距原理将侧边栏“引”到主要内容的两边。--> <style type="text/css"> *{padding:0;margin:0;} .mainbox{background:#ccc;width:100%;float:left;} .mainbox .content{margin:0 210px 0 0;background:red} .sidebox{width: 200px;float:left;background:green;margin-left:-200px;} .footer{background:yellow} .container:after { display:block; visibility:hidden; font-size:0; line-height:0; clear:both; content:""; } </style> </head> <body> <div class="container" > <div class="mainbox" id="mainbox"> <div class="content"> <h1> mainbox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> </div> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> </div> <div class="footer"><h1>footer底部</h1></div> <!--增加js代码实现两列等高--> <script type="text/javascript"> var mh = document.getElementById('mainbox'); var sh = document.getElementById('sidebox'); if (mh.clientHeight < sh.clientHeight) { mh.style.height = sh.clientHeight + "px"; } else { sh.style.height = mh.clientHeight + "px"; } </script> </body> </html> 两列优化-一列定宽，一列自适应
6、两列等高：
方法1：负边距
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <!--要点：两容器设置margin-bottom:-9999px; padding-bottom:9999px，父元素设置overflow:hidden; 问题：如果页面使用<a>做页面跳转，将会隐藏部分文字信息。如果将背景图片放到mainBox或者sideBox底部，将看不到背景图片。 左侧（非定位）内容高度不能大于右侧（已定位）的内容高度，否则将无法撑开容器的高度 --> <style type="text/css"> *{padding:0;margin:0;} .container{overflow:hidden;position:relative; } .mainbox{width:100%;float:left;background:green;margin-right:200px;} .sidebox{width:200px;background:red;margin-left:-200px;position:absolute;top:0;right:0; } .footer{background:yellow;} /*实现左右两侧等高，但要注意的是，左侧（非定位）内容高度不能大于右侧（已定位）的内容高度，否则将无法撑开容器的高度*/ .mainbox,.sidebox{margin-bottom:-9999px;padding-bottom:9999px;} </style> </head> <body> <div class="container"> <div class="sidebox" id="sidebox"> <h1> sidebox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> </div> <div class="mainbox" id="mainbox"> <h1> mainox</h1> <p>春眠不觉晓</p> <p>处处闻啼鸟</p> <p>夜来风雨声</p> <p>花落知多少</p> </div> </div> <div class="footer"> <h1>footer</h1> </div> </body> </html>
方法2：js实现：
要点：在页面底部增加js代码实现两列等高
<script type="text/javascript">
var mh = document.getElementById('mainbox');
var sh = document.getElementById('sidebox');
if (mh.clientHeight < sh.clientHeight)
{
mh.style.height = sh.clientHeight + "px";
} else {
sh.style.height = mh.clientHeight + "px";
}
</script>
