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. linux下备份mysql命令

    一,数据库的备份与导入 1),数据库的备份 1.导出整个数据库mysqldump -u 用户名 -p 数据库名 > 导出的文件名例:mysqldump -u dbadmin -p myblog ...

  2. 电商大促准备流程v2

    1 概述 对于电商企业而言,每年都会有几次大的促销活动,像双十一.店庆等,对于第一次参加这个活动的新手,难免会有些没有头绪,因而将自己参加双十一.双十二活动中的过程心得进行下总结,一方面供以后工作中继 ...

  3. ecslipe cdt lib link

    项目属性-> settings -> mingw c linker 1.libs search 填写lib路径 2.lib 填写文件名,不要后缀

  4. 爆料喽！！！开源日志库Logger的使用秘籍

    日志对于开发来说是非常重要的,不管是调试数据查看.bug问题追踪定位.数据信息收集统计,日常工作运行维护等等,都大量的使用到.今天介绍著名开源日志库Logger的使用,库的地址:https://git ...

  5. 谷歌正式发布Google APIs Client Library for .NET

    好消息,特大好消息! 英文原文:Google API library for .NET paves the way for Google services on Windows phone 本月 17 ...

  6. 在Visual Studio 2010中进行“项目重命名”的有效工具

    地址:http://www.cnblogs.com/dudu/archive/2011/12/11/visual_studio_2010_project_rename.html 提示:这个工具一次 r ...

  7. ecshop中那些有意思的代码

    1:返回数量为0的array,而不是null /** * 获得推荐商品 * * @access public * @param string $type 推荐类型,可以是 best, new, hot ...

  8. IOS中图片加载的一些注意点

    图片的加载: [UIImage imageNamed:@"home"] //加载 png图片 在ios中获取一张图片只需要写图片名即可 不需要写后缀 默认都是加载.png的图片 但 ...

  9. C#函数式程序设计之用闭包封装数据

    如果一个程序设计语言能够用高阶函数解决问题,则意味着数据作用域问题已十分突出.当函数可以当成参数和返回值在函数之间进行传递时,编译器利用闭包扩展变量的作用域,以保证随时能得到所需要的数据. C#函数式 ...

  10. [C#] 谈谈异步编程async await

    为什么需要异步,异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中, ...