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. LocalBroadcastManager 使用小解

    最近在开发平板项目,完全是fragmentactivity+fragment的结构.看起来似乎简单,但是和以前不同的是,业务逻辑非常复杂,多处的非常规跳转,fragment之间的数据交换,一处更新多处 ...

  2. Can't get WebApplicationContext object from ContextRegistry.GetContext(): Resource handler for the 'web' protocol is not defined

    I'm stucked in configuring my web.config file under a web forms project in order to get an instance ...

  3. Entityframework 事务

    Working with Transactions (EF6 Onwards) This document will describe using transactions in EF6 includ ...

  4. 白话Redis与Memcached区别

    如果简单地比较Redis与Memcached的区别,外在的区别是: 1  Redis不仅仅支持简单的k/v类型的数据,同时还提供list,set,zset,hash等数据结构的存储. 2  Redis ...

  5. 轻量型ORM框架Dapper的使用

    在真实的项目开发中,可能有些人比较喜欢写SQL语句,但是对于EF这种ORM框架比较排斥,那么轻量型的Dapper就是一个不错的选择,即让你写sql语句了,有进行了关系对象映射.其实对于EF吧,我说下我 ...

  6. form表单action提交表单，页面不跳转且表单数据含文件的处理方法

    在最近的项目中需要将含 input[type='file']的表单提交给后台 ,并且后台需要将文件存储在数据库中.之前所用的方法都是先将文件上传到七牛服务器上,然后七牛会返回文件的下载地址,在提交表单 ...

  7. Android Http请求

    Android HTTP请求封装代码 /** * This class is the Utils of other classes. */ public class HttpUtil { /** 变量 ...

  8. 资料下载：生活方向盘PPT以及活动录音（2011.02）

    本文已挪至 http://www.zhoujingen.cn/blog/676.html 免费PDF和活动录音下载: http://down.51cto.com/data/216824 敏捷个人生活方 ...

  9. JAVA生成随机数种子的方法

    Java里面有一个随机函数——Random,刚开始只是知道这个函数具有随机取值的作用,于是上网搜索了资料一番,做了一下一些关于Random函数的总结:   Java中存在着两种Random函数: 一. ...

  10. 谈论XSS

    XSS 叫跨站脚本攻击(Cross Site Script),那么XSS原本应该叫做CSS,但是由于CSS的简称已经被连级样式表 使用了,所以就换个称谓XSS. 为什么叫做跨站脚本攻击呢? 它的意思就 ...