1、宽度自适应两列布局

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

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>宽度自适应两列布局</title>

 <style>

 *{margin:0;padding:0;}

 #herder{

     height:50px;

     background:blue;

 }

 .main-left{

     width:30%;

     height:800px;

     background:red;

     float:left;

 }

 .main-right{

     width:70%;

     height:800px;

     background:pink;

     float:right;

 }

 #footer{

     clear:both;

     height:50px;

     background:gray;

 }

 </style>

 </head>

 <body>

 <div id="herder">页头</div>

 <div class="main-left">左列</div>

 <div class="main-right">右列</div>

 <div id="footer">页脚</div>

 </body>

 </html>

2、固定宽度两列布局

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

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>固定宽度两列布局</title>

 <style>

 *{margin:0;padding:0;}

 #herder{

     height:50px;

     background:blue;

 }

 #main{

     width:960px;

     margin:0 auto;

     overflow:hidden;

 }

 #main .main-left{

     width:288px;

     height:800px;

     background:red;

     float:left;

 }

 #main .main-right{

     width:672px;

     height:800px;

     background:pink;

     float:right;

 }

 #footer{

     width:960px;

     height:50px;

     background:gray;

     margin:0 auto;

 }

 </style>

 </head>

 <body>

 <div id="herder">页头</div>

 <div id="main">

     <div class="main-left">左列</div>

     <div class="main-right">右列</div>

 </div>

 <div id="footer">页脚</div>

 </body>

 </html>

3、两列居中自适应布局

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

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>两列居中自适应布局</title>

 <style>

 *{margin:0;padding:0;}

 #herder{

     height:50px;

     background:blue;

 }

 #main{

     width:80%;

     margin:0 auto;

     overflow:hidden;

 }

 #main .main-left{

     width:20%;

     height:800px;

     background:red;

     float:left;

 }

 #main .main-right{

     width:80%;

     height:800px;

     background:pink;

     float:right;

 }

 #footer{

     width:80%;

     height:50px;

     background:gray;

     margin:0 auto;

 }

 </style>

 </head>

 <body>

 <div id="herder">页头</div>

 <div id="main">

     <div class="main-left">左列</div>

     <div class="main-right">右列</div>

 </div>

 <div id="footer">页脚</div>

 </body>

 </html>

4、固定宽度横向两列布局

　　和单列布局相同，可以把所有块包含在一个容器中，这样做方便设置，但增加了无意义的代码，固定宽度就是给定父容器的宽度，然后中间主体使用浮动。

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>横向两列布局</title>

 <style>

 *{margin:0;padding:0;}

 #warp{

     width:960px;

     margin:0 auto;

     margin-top:10px;

 }

 #herder{

     height:50px;

     background:blue;

 }

 #nav{

     height:30px;

     background:orange;

     margin:10px 0;

 }

 #main{

     width:100%;

     margin-bottom:10px;

     overflow:hidden;

 }

 #main .main-left{

     width:640px;

     height:200px;

     background:yellow;

     float:left;

 }

 #main .main-right{

     width:300px;

     height:200px;

     background:pink;

     float:right;

 }

 #content{

     width:100%;

     overflow:hidden;

 }

 #content .content-left{

     width:640px;

     height:800px;

     background:lightgreen;

     float:left;

 }

 #content .content-right-sup{

     width:300px;

     height:500px;

     background:lightblue;

     float:right;

 }

 #content .content-right-sub{

     width:300px;

     height:240px;

     background:purple;

     margin-top:20px;

     float:right;

 }

 #footer{

     height:50px;

     background:gray;

     margin-top:10px;

 }

 </style>

 </head>

 <body>

 <div id="warp">

     <div id="herder">页头</div>

     <div id="nav">导航</div>

     <div id="main">

         <div class="main-left">左-上</div>

         <div class="main-right">右-上</div>

     </div>

     <div id="content">

         <div class="content-left">左-下</div>

         <div class="content-right-sup">右-上</div>

         <div class="content-right-sub">右-下</div>

     </div>

     <div id="footer">页脚</div>

 </div>

 </body>

 </html>

DIV+CSS 网页布局之：两列布局的更多相关文章

  1. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  2. 慕课笔记利用css进行布局【两列布局】

    <html> <head> <title>两列布局</title> <style type="text/css"> bo ...

  3. CSS常用布局方式-两列布局、三列布局

    CSS基础 2.几种布局方式1)table布局 当年主流的布局方式,第一种是通过table tr td布局 示例: <style type="text/css"> ta ...

  4. css布局之两列布局

    我们见过两列布局的网站也很多,不过这种两列布局的分为两种:自适应和固定宽度 1.自适应两列布局 <!DOCTYPE html> <html lang="en"&g ...

  5. bootstrap的栅格布局与两列布局结合使用

    在工作中我们常常需要实现响应式布局,这个可以使用bootstrap的栅格系统来实现,我们在列里也需要实现一部分的响应式.比如下面的效果图,需要实现左边图标固定,右边的自适应 : 左边固定宽度,右边自适 ...

  6. DIV+CSS 网页布局之：一列布局

    1.网页布局 布局(layout)即对事物的全面规划和安排,页面布局是对页面的文字.图像或表格进行格式化版式排列.网页布局对改善网站的外观非常重要,又称版式布局,大多数网站会把内容安排到多个列中,就像 ...

  7. CSS读书笔记（1）---选择器和两列布局

    (1)CSS选择器优先权选择. 优先权从大到小的选择如下: 标有!important关键字声明的属性 HTML中的CSS样式属性 <div style="color:red" ...

  8. css布局--两列布局，左侧固定，右侧自适应（其中左侧要可以拖动，右侧水平滚动条）

    (css布局所要实现的效果) 在前端面试中经常会被问到CSS布局,两列布局,左侧固定,右侧自适应.前几天去面试,遇到了这道题的升级版,要求左侧可拖动,右侧要有水平滚动条.拿到题目确实有些大脑短路,不知 ...

  9. jqm的多列布局demo,html5的多列布局demo,多列布局的具体解说,html5开发实例具体解释

    因为移动设备屏幕宽度较小,所以一般不建议使用多列布局.但有时你可能须要并排放置一些元素(如button之类的). jQuery Mobile通过约定的类名ui-grid来提供了一种基于css的多列布局 ...

随机推荐

  1. zepto下动画返回顶部

     function scroll(scrollTo, time) {                var scrollFrom = parseInt(document.body.scrollTop) ...

  2. Codeforces Round #382 (Div. 2)E. Ostap and Tree

    E. Ostap and Tree time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...

  3. spring boot配置写法

    转自:http://blog.csdn.net/mickjoust/article/details/51646658 每日金句 你要搞清楚自己人生的剧本:不是你父母的续集,不是你子女的前传,更不是你朋 ...

  4. SpringMVC经典系列-13使用SpringMVC处理Ajax请求---【LinusZhu】

    注意:此文章是个人原创,希望有转载须要的朋友们标明文章出处,假设各位朋友们认为写的还好,就给个赞哈,你的鼓舞是我创作的最大动力,LinusZhu在此表示十分感谢,当然文章中如有纰漏,请联系linusz ...

  5. MySQL 复制+快照恢复误删除操作实验测试

    下面假定2个场景: 场景1:主从架构,没有延迟,某DBA误操作:drop database [复制+快照:在线备份]场景2:存在不确定性或者风险性较大的操作,如升级测试,大表变更[啥事都在快照上折腾, ...

  6. 用mac自带的safari浏览器下载excel文件后面自带了.exe后缀

    将 Content-Type 设为 application/vnd.ms-excel

  7. [GIF] GIF Loop Coder - Interpolation

    This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change t ...

  8. Java中Map的使用

    Map以按键/数值对的形式存储数据,和数组很类似,在数组中存在的索引,它们本身也是对象.       Map的接口       Map---实现Map       Map.Entry--Map的内部类 ...

  9. oracle学习----去除表中的重复数据

    重复的数据可能有这样两种情况,第一种:表中只有某些字段一样,第二种:两行记录完全一样.第一.对于部分字段重复数据的删除        先来谈谈如何查询重复的数据吧.        下面语句可以查询出那 ...

  10. overflow: hidden用法，不仅仅是隐藏溢出

    overflow:hidden是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. <!DOCTYPE html> <html ...