实际项目开发过程中遇到页面 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. WMIC_2

  2. Nodejs与mysql连接池的应用（pool）

    /* * 连接池 连接和缓存的技术 * */ var mysql = require('mysql'); var pool = mysql.createPool({ connectionLimit:2 ...

  3. 理解AndroidX

    理解AndroidX 刚刚看到自己加的一个Android群里有人问AndroidX,还是Google自己的,竟然没听说过,慌的一匹.赶紧去看了下官方文档和一些博客,对AndroidX有了如下理解 An ...

  4. PPTP

    一: VPN企业应用分类 1:远程访问VPN服务 员工个人电脑通过远程拨号到企业办公网络,如公司的OA系统. 运维人员远程拨号到DC机房,远程维护服务器. 2:企业内部网络之间VPN服务 公司分支机构 ...

  5. layui form表单 input输入框获取焦点后 阻止Enter回车自动提交

    最简单的解决办法,不影响其他操作,给提交按钮增加 type="button" 属性 完美解决 <button type="button" class=&q ...

  6. Python豆瓣源

    pip install -i https://pypi.doubanio.com/simple/ xxxx

  7. 《MySQL必知必会》--使用cmd登陆数据库

    数据库:保存有组织的数据的容器(通常是一个文件或一组文件). 表:某种特定类型数据的结构化清单. 模式:关于数据库和表的布局及特性的信息. 列:表中的一个字段.所有表都是由一个或多个列组成的. 数据类 ...

  8. Redis（六）：Redis的事务

    Redis的事务目录导航: 是什么 能干嘛 怎么玩 3阶段 3特性 是什么 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其它命令插入,不许加塞 ...

  9. Java : Netty 入门案例

    接收端代码: public class IOServer { public static void main(String[] args) throws IOException, Interrupte ...

  10. 通过devmem访问物理地址

    目录 1.写在前面 2.devmem使用 3.应用层 4.内核层 1.写在前面 最近在调试时需要在用户层访问物理内存,发现应用层可以使用devmem工具访问物理地址.查看源码,实际上是对/dev/me ...