实际项目开发过程中遇到页面 DIV 左右布局的需求：左侧 DIV 固定宽度，右侧 DIV 自适应宽度，填充满剩余页面，由此引申出本文的几种解决方案

1 左侧 DIV 设置 float 属性为 left，右侧 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title>Insert title here</title>

    <style>

      .left {

        float: left;

        width: 300px;

        height: 300px;

         padding: 0px;"> red;

      }

      .right {

         padding: 0px;"> orange;

        margin-left: 310px;

        height: 300px;

      }

    </style>

  </head>

  <body>

    <div class="left"></div>

    <div class="right"></div>

  </body>

</html>

实际效果： 

2 左侧 DIV 设置 float 属性为 left，负边距 100%，右侧 DIV 中嵌套一个 DIV，页面内容放入嵌套的 DIV 中，右侧内嵌 DIV 设置 margin-left 属性等于或大于左侧 DIV 宽度

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title>Insert title here</title>

    <style>

      .left {

        float: left;

        width: 300px;

        height: 300px;

         padding: 0px;"> gray;

        margin-right: -100%;

      }

      .right {

        float: left;

        width: 100%;

      }

      .right-content {

        height: 300px;

        margin-left: 310px;

         padding: 0px;"> black;

      }

    </style>

  </head>

  <body>

    <div class="left"></div>

    <div class="right">

      <div class="right-content"></div>

    </div>

  </body>

</html>

实际效果： 

3 如果将需求修改为右侧固定宽度而左侧自适应宽度

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <title>Insert title here</title>

    <style>

      .left {

        float: left;

        width: 100%;

        height: 300px;

         padding: 0px;"> blue;

        margin-right: -300px;

      }

      .right {

        float: right;

        width: 300px;

        height: 300px;

         padding: 0px;"> yellow;

      }

    </style>

  </head>

  <body>

    <div class="left"></div>

    <div class="right"></div>

  </body>

</html>

实际效果： 

div布局方案整理的更多相关文章

  1. css常用左右布局方案整理

     实际项目开发过程中我们经常会遇到页面div左右布局的需求:左侧 div 固定宽度,右侧 div 自适应宽度,填充满剩余页面,下面整理几种常用的方案  1 左侧 div 设置 float 属性为 le ...

  2. css三栏布局方案整理

    日常开发中,经常会用到css三栏布局,现将工作中常用的css 三栏布局整理如下: 什么是三栏布局: 三栏布局,顾名思义就是两边固定,中间自适应. 一. float布局 <!DOCTYPE htm ...

  3. 移动适配请使用比rem等更好的布局方案

      移动端大行其道,rem/em.百分比.响应式方案更是层出不穷,看见周围的伙伴们都在对使用rem和百分比情有独钟,可我却偏不爱,之所以出现如此多的方法,其目的只有一个屏幕适配.   屏幕适配顾名思义 ...

  4. CSS常见布局问题整理

    实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 ...

  5. CSS3页面布局方案

    CSS3页面布局方案 Web页面中的布局,在css3之前,主要使用float属性或者position属性进行页面中的简单布局,但是使用它们也存在一些缺点,比如两栏或者多栏中如果元素的内容高度不一致,则 ...

  6. 小div布局之卡片堆叠（card-stacking）

    前端的页面布局和各种效果真是让人眼花缭乱,公司的设计师恨不得在一个网站上把前端的布局和样式效果都用一遍. 如何实现下面这种布局效果?我给这种布局效果起了个名字,叫做小div布局之卡片堆叠.然后我百度了 ...

  7. 淘宝弹性布局方案lib-flexible实践

    2个月前,写过一篇文章<从网易与淘宝的font-size思考前端设计稿与工作流>总结过一些移动web中有关手机适配的一些思路,当时也是因为工作的关系分析了下网易跟淘宝的移动页面,最后才有那 ...

  8. 基于淘宝弹性布局方案lib-flexible的问题研究

    上篇文章<淘宝弹性布局方案lib-flexible实践>结合一个简单的实例,说明了lib-flexible的基本用法,但是lib-flexible的这种适配方式在适配的时候会修改viewp ...

  9. [MVC] DIV 布局

    [MVC] DIV 布局 <style> .top { background-color: red; height: 50px; top: 0px; position: absolute; ...

随机推荐

  1. 第六章.MyBatis缓存结构

    一级缓存 测试案例: MyBatisTest.java //缓存 @Test public void testFindCustomerCache1() throws Exception{ SqlSes ...

  2. c#用链表来存储并读取写好的配置文件

    别用arraylist,效果没有list好(因为要装箱拆箱,所以会影响性能) 使用list,那我们就来先声明一个List 1) 声明 List<元素类型> myList = new Lis ...

  3. 面试准备——（二）专业知识（4）C／C++语言

    1. 预处理 断言 assert的功能,assert(statement),如果statement为真则程序继续执行,为假则整个程序中断退出 3. #define [ #ifndef DISKSIM_ ...

  4. ringMVC——redirect重定向跳转传值

    spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示.     首先先来介绍一下不带参数的重定向:    ...

  5. webservice 从客户端中检测到有潜在危险的 Request.Form 值

    webservice中传递xml格式的参数时报错 webservice 从客户端中检测到有潜在危险的 Request.Form 值解决方案: 1.在web.config的system.web节点中添加 ...

  6. usb入门学习

    1.学习资源: usb org.http://www.beyondlogic.org/usbnutshell/usb3.shtml http://wenku.baidu.com/view/028231 ...

  7. “->”和“.”运算符

    1.指向结构变量的指针. 2.定义:struct stu *pstu, 赋值是把结构变量的首地址赋给指针,不能把结构名给该指针:如, pstu = &boy; 3. 访问结构变量的成员 (*结 ...

  8. 微信小程序，搜索结果关键词高亮 wxml不能动态识别html标签

    wxml中使用rich-text标签放置动态html标签 js:

  9. 【JavaScript-基础-cookie从入门到进阶】

    cookie 关于cookie 用于方便服务端管理客户端状态提出的一种机制. document.cookie 客户端JavaScript可通过document.cookie方式获取非HTTPOnly状 ...

  10. ES6系列文章 异步神器async-await

    关于异步处理,ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于.ES7的async-await带我们走向光明.今天就来学习一下 async-await. async-await和 ...