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. 10个可以直接拿来用的JQuery代码片段

    jQuery里提供了许多创建交互式网站的方法,在开发Web项目时,开发人员应该好好利用jQuery代码,它们不仅能给网站带来各种动画.特效,还会提高网站的用户体验. 本文收集了10段非常实用的jQue ...

  2. Lucene子项目------------------Solr遇到的问题

    SolrCore Initialization Failures paper: org.apache.solr.common.SolrException:org.apache.solr.common. ...

  3. [caffe]深度学习之图像分类模型VGG解读

    一.简单介绍 vgg和googlenet是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是go deeper.跟googlenet不同的是.vgg继承了lenet以及alexnet ...

  4. [2014.5.22][UBUNTU]Ubuntu与Windows系统时间不同步的问题

    安装Ubuntu+Windows双系统时会遇到Windows和Ubuntu系统时间不同步的问题,这是由于Windows系统默认读取主板bios等硬件系统时间作为OS的当地时间;而MAc,Linux类的 ...

  5. 分布式助手Zookeeper（一）

    分布式助手Zookeeper(一)博客分类: Zookeeper   Zookeeper最早是Hadoop的一个子项目,主要为Hadoop生态系统中一些列组件提供统一的分布式协作服务,在2010年10 ...

  6. 征服 Redis + Jedis + Spring （一）—— 配置&常规操作（GET SET DEL）

    有日子没写博客了,真的是忙得要疯掉. 完成项目基础架构搭建工作,解决了核心技术问题,接着需要快速的调研下基于Spring框架下的Redis操作. 相关链接: 征服 Redis 征服 Redis + J ...

  7. 【转】GitHub平台最火的iOS开源项目——2013-08-25 17

    http://www.cnblogs.com/lhming/category/391396.html 今天,我们将介绍20个在GitHub上非常受开发者欢迎的iOS开源项目,你准备好了吗? 1. AF ...

  8. create database xx 或者show database 没有任何反应

    命令是以:结束的,你忘记了,记住,是英文状态下的:

  9. 【iOS程序启动与运转】- RunLoop个人小结

    学习iOS开发一般都是从UI开始的,从只知道从IB拖控件,到知道怎么在方法里写代码,然后会显示什么样的视图,产生什么样的事件,等等.其实程序从启动开始,一直都是按照苹果封装好的代码运行着,暴露的一些属 ...

  10. Cookie中图片的浏览记录与cookie读取servle时路径的设置（文字描述）

    public class ShowServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpSer ...