实际项目开发过程中遇到页面 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. JDBC（4）PreparedStatement

    PreparedStatement: 是一个预编译对象 是Statement的子接口 允许数据库预编译SQL 执行SQL的时候,无需重新传入SQL语句,它们已经编译SQL语句 执行SQL语句 :exe ...

  2. Entity Framework——性能测试

    内容提要 一.对EF框架的性能测试 增.删.改,查测试及性能优化 二.使用sql执行 增.删.改,查测试 三.对以上两种方式对比分析 一 对EF框架的测试 1插入操作测试 测试代码(关键部分) Lis ...

  3. 关于Git学习推荐

    Git学习除了推荐官方网站:https://git-scm.com/之外, 我个人比较推荐初学者或者被动使用者可以学习参考廖雪峰的这个教程:https://www.liaoxuefeng.com/wi ...

  4. QGis 利用Python Console编写脚本进行批量处理

    前言 这篇文章里,我们要完成一些数据的合并,计算等操作. 准备工作 首先要了解Qgis的编程模型,具体参考文章<QGIS里的编程模型>及<Qgis里的查询过滤>.了解了Qgis ...

  5. 如何安装zip格式的MySQL

    1.MySQL安装文件分为两种,一种是msi格式的,一种是zip格式的.如果是msi格式的可以直接点击安装,按照它给出的安装提示进行安装(相信大家的英文可以看懂英文提示),一般MySQL将会安装在C: ...

  6. Mobile IP

    Mobile IP Proliferation(增生) of mobile devices: PDAs, laptops, smart phones, - As user moves, point-o ...

  7. 安装 git,并创建版本库 记录一下

    参考大神网址: http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000/001374325 ...

  8. Advanced Plugin Concepts

    Provide Public Access to Default Plugin Settings An improvement we can, and should, make to the code ...

  9. Vue教程：指令与事件（二）

    一.插值 v-once 通过使用 v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新.但请留心这会影响到该节点上所有的数据绑定: span v-once>这个将不会改 ...

  10. sql 优化的几种方法

    .对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. .应尽量避免在 where 子句中对字段进行 null 值判断,否则将导致引擎放弃使用索引而 ...