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

代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style type="text/css" >

        body{

            padding:0;

            margin:0;

        }

        .wrapper{

            width: 960px;

            margin:0 auto;

        }

        .header {

            height: 75px;

            background-color: #BD9C8C;

            margin-bottom: 5px;

        }

        .left{

            width: 340px;

            height: 600px;

            margin-right: 20px;

            _display:inline;/*IE6双边距BUG*/

            float: left;

            background-color:#E7DBD5;

        }

        .right{

            width: 600px;

            height: 600px;

            _display:inline;/*IE6双边距BUG*/

            float: left;

            background-color: #F2F2E6;

        }

        .footer {

            clear: both; /*清除浮动，非常重要，不可缺少*/

            background-color: #BD9C8C;

            margin-bottom: 5px;

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div class="header">

        <h1>Header</h1>

    </div>

    <div class="left">

        <h2>left</h2>

    </div>

    <div class="right">

        <h2>right</h2>

    </div>

    <div class="footer">

        <h2>Footer</h2>

    </div>

</div>

</body>

</html>

2.左侧定宽，右侧自适应

方法一：

right相对父元素使用absolute定位并设置margin-left，需要注意：固定宽的列的高度>自适应宽度列的高度

代码如下：

方法二：

float和overflow配合可实现两列自适应效果，兼容IE6-浏览器需要设置zoom:1

        .container{

              overflow: hidden;

        }

        .left{

            margin-right: 20px;

               float: left;

               width: 340px;

               height: 500px;

                background-color:#E7DBD5;

        }

        .right{

               overflow: hidden;

                background-color: #F2F2E6;

        }

CSS布局——横向两列布局的更多相关文章

  1. 盒子模型、网页自动居中、float浮动与清除、横向两列布局

    1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...

  2. css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

    原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...

  3. css之页面两列布局

    两列布局:左边固定,后边自适应 第一种方法:左边的div左浮动或者是绝对定位,右边的div加margin-left:左边div的宽度 html部分 <div class="left&q ...

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

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

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

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

  6. css布局之两列布局

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

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

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

  8. div+css经典三行两列布局

    写在前面 在面试的时候遇到这样一个笔试题,使用div+css布局一个三行两列的页面.这里主要考察的是css中postion的具体用法.详细信息可参考我这篇文章: [HTML/CSS]说说positio ...

  9. html笔记 横向两列布局

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. MAC自带的SVN进行升级

    1.下载高版本svn:http://www.wandisco.com/subversion/download 2.安装 3. #1.在.bash_profile添加export PATH=/opt/s ...

  2. ios 实现推送消息

      iOS消息推送的工作机制可以简单的用下图来概括: Provider是指某个iPhone软件的Push服务器,APNS是Apple Push Notification Service的缩写,是苹果的 ...

  3. JS中的constructor与prototype

    http://www.cnblogs.com/qiantuwuliang/archive/2011/01/08/1930548.html 在学习JS的面向对象过程中,一直对constructor与pr ...

  4. js类（继承）（一）

    //call() //调用一个对象的一个方法,以另一个对象替换当前对象. //call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) //参数 //thisObj / ...

  5. 2013年Linux周刊读者投票出炉 Ubuntu、Android榜上有名

    摘要:一年一度的Linux周刊读者投票结果已经登于2013第12期.这是Linux爱好者们自己的“奥斯卡”: Linux周刊的小编们列出一系列Linux相关的“最佳项目”进行面向读者的投票.竞选项目包 ...

  6. HTML 表格的属性设置

    对于很多初学HTML的人来说,表格<table>是最常用的标签了,但对于表格边框的控制,很多初学者却不甚其解.   对于很多初学HTML的人来说,表格<table>是最常用的标 ...

  7. java框架篇---spring AOP 实现原理

    什么是AOP AOP(Aspect-OrientedProgramming,面向方面编程),可以说是OOP(Object-Oriented Programing,面向对象编程)的补充和完善.OOP引入 ...

  8. css3 画圆记录

    <style> .radar-wrapper * { -moz-box-sizing: border-box; box-sizing: border-box; margin:; paddi ...

  9. ruby -- 基础学习（四）TimeDate处理

     TimeDate格式化输出: DateTime.parse(Time.now.to_s).strftime('%Y-%m-%d %H:%M:%S').to_s #就是按照2013-8-16 16:4 ...

  10. [IR] Boolean retrieval

    How to build Inverted Index? 1. Token sequence. 2. Sort by terms. 3. Dictionary & Postings code ...