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. POJ 3320 Jessica's Reading Problem

    Jessica's Reading Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6001   Accept ...

  2. spring 启动流程

    AbstractApplicationContext 分析 启动流程 // Prepare this context for refreshing.prepareRefresh(); 1. // In ...

  3. Visual Studio 2015开发Android App启动调试始终无法完成应用部署的解决方案

    创建一个Android App项目后,直接启动调试发现Visual Studio Emulator for Android已成功运行,但应用始终处于Build中(等待时间超过1小时),并未如预期通过a ...

  4. 【原】Configuring Oracle Data Guard In Physical Standby Database

    作者:david_zhang@sh [转载时请以超链接形式标明文章] http://www.cnblogs.com/david-zhang-index/p/5042640.html参照文档:https ...

  5. [CS231n-CNN] Image classification and the data-driven approach, k-nearest neighbor, Linear classification I

    课程主页:http://cs231n.stanford.edu/ Task: Challenges: _________________________________________________ ...

  6. php 将一个二维数组转换成有父子关系的数组

    <?php /** * Tree 树型类(无限分类) * * @author Kvoid * @copyright http://kvoid.com * @version 1.0 * @acce ...

  7. [0x01 用Python讲解数据结构与算法] 关于数据结构和算法还有编程

    忍耐和坚持虽是痛苦的事情,但却能渐渐地为你带来好处. ——奥维德 一.学习目标 · 回顾在计算机科学.编程和问题解决过程中的基本知识: · 理解“抽象”在问题解决过程中的重要作用: · 理解并实现抽象 ...

  8. 基于MSP430F413水果电池供电的低功耗时钟

      我最早接触MSP430时候,看到书的第一页就是一张水果电池的图片,一直以来想做一个低功耗的可以水果电池供电的系统,毕业之后的下半年选择MSP430F413单片机来画了一个低功耗的板子,一直没有调试 ...

  9. 【分享】Matlab R2015a 发布啦！

    本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html Matlab和C#混合编程文章目录:http://www.cnblogs.com ...

  10. ubuntu启动器和dash里应用图标不正常

    在以下目录: /usr/share/applications~/.local/share/applications 添加或编辑(pycharm图标不正常):jetbrains-pycharm.desk ...