两列布局：

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>






 


 


 
												


											
两列布局，读《css那些事儿》的更多相关文章
	

    
								
  1. css之页面两列布局
		
    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
    
		
    2. 
						
  2. CSS布局——横向两列布局
		
    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
    
		
    3. 
						
  3. css两列布局，一边固定宽度，另一边自适应
		
    <!DOCTYPE HTML><HTML>    <head>                <meta charset="utf-8"  ...
    
		
    4. 
						
  4. css两列布局之基于BFC规则实现
		
    css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
    
		
    5. 
						
  5. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
		
    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
    
		
    6. 
						
  6. CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
		
    最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化  个人总结出如下三种实现思路: 通过绝对定位实现 S ...
    
		
    7. 
						
  7. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
		
    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
    
		
    8. 
						
  8. 慕课笔记利用css进行布局【两列布局】
		
    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...
    
		
    9. 
						
  9. CSS读书笔记（1）---选择器和两列布局
		
    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. size_t, ptrdiff_t, size_type, difference_type
			
    size_t是unsigned类型,用于指明数组长度或下标,它必须是一个正数,std::size_t ptrdiff_t是signed类型,用于存放同一数组中两个指针之间的差距,它可以负数,std:: ...
    
			
    2. 
						
  2. style控制打印分页
			
    [转载地址:http://www.cnblogs.com/JustinYoung/articles/710734.html]page-break-before和page-break-after CSS ...
    
			
    3. 
						
  3. Git中的merge命令实现中出现问题及其解决
			
    Git中的merge命令实现和工作方式 2015年8月17日星期一 丹丹 git代码在合并两个分支的时候总是会出现一下的错误提示,不能正常的完成合并分支,错误提示如图所示: 但是在其他的终端是可以完成 ...
    
			
    4. 
						
  4. apt-key  adv
			
    gpg --recv-keys KEY-ID                gpg --armor --export KEY-ID | sudo apt-key add - http://m.blog ...
    
			
    5. 
						
  5. 两种方法将oracle数据库中的一张表的数据导入到另外一个oracle数据库中
			
    oracle数据库实现一张表的数据导入到另外一个数据库的表中的方法有很多,在这介绍两个. 第一种,把oracle查询的数据导出为sql文件,执行sql文件里的insert语句,如下: 第一步,导出sq ...
    
			
    6. 
						
  6. Redis 笔记
			
    Redis是一个key-value存储系统.和Memcached类似,但是解决了断电后数据完全丢失的情况,而且她支持更多无化的value类型,除了和string外,还支持lists(链表).sets( ...
    
			
    7. 
						
  7. log4j打印出线程号和方法名
			
    先参考实现配置,如果想要更加详细的配置,可加上更多参数: log4j.rootLogger = INFO,FILE,CONSOLE log4j.appender.FILE.Threshold=INFO ...
    
			
    8. 
						
  8. Java中的五种单例模式实现方法
			
    [代码] Java中的五种单例模式实现方法   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 2 ...
    
			
    9. 
						
  9. keyboardWillChangeFrameNotification 引发的思考  是的 思考了很久终于出结果
			
    func keyboardWillChangeFrameNotification(note: NSNotification) { // TODO 添加键盘弹出的事件 let userinfo = no ...
    
			
    10. 
						
  10. POJ 2115  C Looooops (扩展欧几里德 + 线性同余方程）
			
    分析:这个题主要考察的是对线性同余方程的理解,根据题目中给出的a,b,c,d,不难的出这样的式子,(a+k*c) % (1<<d) = b; 题目要求我们在有解的情况下求出最小的解,我们转 ...
    
			
    11.