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. BZOJ 1006 [HNOI2008] 神奇的国度（简单弦图的染色）

    题目大意 K 国是一个热衷三角形的国度,连人的交往也只喜欢三角原则.他们认为三角关系:即 AB 相互认识,BC 相互认识,CA 相互认识,是简洁高效的.为了巩固三角关系,K 国禁止四边关系,五边关系等 ...

  2. 网络安装archlinux（2012.8.20）笔记

    周末闲极无聊,把烂笔记本翻出来想装个Archlinux,发现USB不能启动,光驱也挂了,只好网络安装. 我先后试了两种安装方式,一种纯互联网启动,安装,一种局域网启动,再互联网安装.分别说说. 不管哪 ...

  3. IEEEtran模版中添加中文：\usepackage{CJKutf8}

    \documentclass[conference]{IEEEtran} \usepackage{cite} \usepackage{graphicx} \usepackage{CJKutf8} \b ...

  4. MFC设置静态文本框，编辑框等控件背景和字体颜色

    在MFC类库提供了CWnd::OnCtlColor函数,在工作框架的子窗口被重画时将调用该成员函数.因此可以重载WM_CTLCOLOR消息的响应函数.此函数的原型:afx_msg HBRUSH OnC ...

  5. zepto - reduce

    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce var ss ...

  6. Hadoop入门进阶课程12--Flume介绍、安装与应用案例

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan  ...

  7. sql server 查找包含字符串的对象

    sql server 查找包含字符串的对象 SELECT sm.object_id, OBJECT_NAME(sm.object_id) AS object_name, o.type, o.type_ ...

  8. Java魔法堂：打包知识点之META-INF/MAINFEST.MF

    一.前言     通过执行形如 jar -cvf src.jar src 命令将多个.class文件打包成JAR包时,你会发现JAR包中除了src目录外还多了个MATE-INF/MAINFEST.MF ...

  9. AOP——代理技术

    一.如何理解代理技术 Proxy:不用你去做,别人代替你去处理.如Windows快捷方式,又如房屋中介 起到一个中介作用,通过代理对象,可以去掉客户不能看到的内容和服务或者添加客户需要的额外服务. 二 ...

  10. 点餐APP 冲刺一总结

    在冲刺一的过程中,我们小组每个人的任务相对来说都比较轻松,完成的进度也比较快, 主要的原因是每个人分配的任务都比较明确,大家也很积极地去完成.当然啦,我们在实现 项目的过程中也遇到了一些麻烦,主要是最 ...