两列布局，读《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>
两列布局，读《css那些事儿》的更多相关文章
- css之页面两列布局
两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- css两列布局，一边固定宽度，另一边自适应
<!DOCTYPE HTML><HTML> <head> <meta charset="utf-8" ...
- css两列布局之基于BFC规则实现
css要实现常见的自适应两列布局的方式方法挺多. 这里讲的是利用设置overflow不为visible时会形成新的BFC来实现.至于什么是BFC,可以搜搜看先,基本都讲的差不多了.等有更多空余时间,专 ...
- css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- CSS 布局实例系列（二）如何通过 CSS 实现一个左边固定宽度、右边自适应的两列布局
最近在百度 IFE 训练营中看见的一道题目: 用两种不同的方法来实现一个两列布局,其中左侧部分宽度固定.右侧部分宽度随浏览器宽度的变化而自适应变化 个人总结出如下三种实现思路: 通过绝对定位实现 S ...
- css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）
(css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...
- 慕课笔记利用css进行布局【两列布局】
<html> <head> <title>两列布局</title> <style type="text/css"> bo ...
- CSS读书笔记（1）---选择器和两列布局
(1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...
随机推荐
- Hadoop YARN ERROR 1/1 local-dirs are bad *， 1/1 log-dirs are bad *
转 http://blog.csdn.net/u012303571/article/details/46913471 查看 nodemanager 日志发下 如下信息 2015-07-16 1 ...
- Nginx配置文件nginx.conf中文详解【转】
PS:Nginx使用有两三年了,现在经常碰到有新用户问一些很基本的问题,我也没时间一一回答,今天下午花了点时间,结合自己的使用经验,把Nginx的主要配置参数说明分享一下,也参考了一些网络的内容,这篇 ...
- Explain of Interaction Operators in UML?
来源于:EA 中的 Interaction Operators Enterprise Architect User Guide Operator Action alt Divide up intera ...
- 深入理解javascript执行上下文(Execution Context)
本文转自:http://blogread.cn/it/article/6178 在这篇文章中,将比较深入地阐述下执行上下文 - Javascript中最基础也是最重要的一个概念.相信读完这篇文章后,你 ...
- iptables基础知识
iptables防火墙可以用于创建过滤(filter)与NAT规则.所有Linux发行版都能使用iptables,因此理解如何配置 iptables将会帮助你更有效地管理Linux防火墙.如果你是第一 ...
- ios开发使用lipo命令合并真机库和模拟器库
在开发ios时,我们经常会遇到编译两套库文件,使用模拟器时链接模拟器库,使用真机时使用真机库,这样操作会对后期的维护带来麻烦,所以Apple提供了一个把多个不同平台的.a库文件合并成一个适用于多平台的 ...
- HTML day03表格与表单
1.表格 一般格式: <table> <thead><!--表格头--> <tr> <th></th> </tr>& ...
- OpenGL—Android 开机动画源码分析一
.1 Android开机动画实现方式目前实现Android开机动画的方式主要是逐帧动画和OpenGL动画. ?逐帧动画 逐帧动画是一种常见的动画形式(Frame By Frame),其原理是在“连续的 ...
- 两个数组各个数相加或相乘变成一个矩阵求第K大
input 1<=T<=20 1<=n<=100000,1<=k<=n*n a1 a2 ... an 0<ai<=10000 b1 b2 ... bn ...
- 【转】linux grep命令详解
简介 grep (global search regular expression(RE) and print out the line,全面搜索正则表达式并把行打印出来)是一种强大的文本搜索工具,它 ...