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. 关于手机短信验证码存session 获取不到的问题

    问题描述:最近做一个项目,手机端注册,服务端产生一个验证码,通过短信发送到手机,并存放到session中,但手机端发送第二次请求传回验证码,要对两个验证码进行比较判断时,session存放的验证码丢失 ...

  2. C++ Virtual详解

    转自:http://www.cnblogs.com/xd502djj/archive/2010/09/22/1832912.html Virtual是C++ OO机制中很重要的一个关键字.只要是学过C ...

  3. UITableView cell中label自动换行和自定义label自动换行

    换行的前提必须是有足够的高度 才能换 否则不显示超出部分 所以,在设置label换行的时候 要考虑cell的高度,cell的高度也要变化,废话不多说,来段代码: cell.label.text=[di ...

  4. Eclipse开发PHP环境配置

    首先准备好软件: 1. Apache,到这里找个最新版本 2. PHP,到这里下载 3. Eclipse IDE for Java EE Developers,到这里下载 4. DLTK Core F ...

  5. Installing the PHP/MongoDB extension on Mac OSX 10.8

    Installing PHP/MongoDB extension is a two steps task on OSX: Install the autoconf tool required for ...

  6. mysql 服务器ip连接统计

    有的时候数据库服务器连接数过大,也没有慢sql,想知道哪些应用服务器连接上来的比较多,下面的命令轻松搞定 netstat -tnp|grep ESTABLISHED|awk '{ print $5 } ...

  7. [ES6] 20. Polyfills

    Polyfill is something you don't need to set up traceur but start to use es6 in today's browser.You c ...

  8. MFC TreeCtrl 控件（一）：简单使用

    本文描写叙述了 MFC 中的树形控件 TreeCtrl 的简单使用,内容包含数据项的加入.图标设置.提示信息设置等. 新建基于对话框的应用程序,加入一个 TreeCtrl ,为其定义一个控件变量 m_ ...

  9. WPF非轮询方式更新数据库变化SqlDependency（数据库修改前台自动更新）

    上一章节我们讲到wpf的柱状图组件,它包含了非轮询方式更新数据库变化SqlDependency的内容,但是没有详细解释,现在给大家一个比较简单的例子来说明这部分内容. 上一章节: WPF柱状图(支持数 ...

  10. docker image export or import

    docker save <image-name> docker load <  <bak>.tar