实际项目开发过程中遇到页面 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. C#通过指针读取文件

    // readfile.cs // 编译时使用:/unsafe // 参数:readfile.txt // C#通过指针读取文件.使用该程序读并显示文本文件. using System; using ...

  2. javaScript 工作必知(十一) 数组常用方法实现

    大纲 Array join reverse反转 sort排序 concat 拼接 slice splice 数组 //定义数组 var a = []; //使用Array定义一个数组, var a1 ...

  3. 确保img的宽高比固定

    html: <div class="wrapper"> <swiper :options="swiperOption"> <swi ...

  4. java SSM 框架 代码生成器 websocket即时通讯 shiro redis

    1.   权限管理:点开二级菜单进入三级菜单显示 角色(基础权限)和按钮权限      角色(基础权限): 分角色组和角色,独立分配菜单权限和增删改查权限.      按钮权限: 给角色分配按钮权限. ...

  5. 用java数组模拟登录和注册功能

    package com.linkage.login; import java.util.Scanner; public class user { // 存储用户名和密码 public static S ...

  6. c#（IronPython）调用Python方法

    直接一段代码演示 public void StartTCP() { ScriptEngine engine = Python.CreateEngine(); var paths = engine.Ge ...

  7. TCP/IP协议族之链路层（二）

    TCP/IP学习记录,如有错误请指正,谢谢!!! TCP/IP协议族之链路层(二) 链路层是最底层协议,主要有三个目的: 1. 为IP模块发送和接收IP数据报 2. 为ARP模块发送ARP请求和接收A ...

  8. 将图片写入二进制文件，再从二进制文件还原图片(c++)

    #include "string" #include "iostream" #include "fstream" using namespa ...

  9. 【补】英语对IT工作者的重要性

    浅谈程序员的英语学习   作为在中国工作的程序员,不懂得英语似乎也不妨碍找到好工作,升职加薪.但程序员这个工种则稍有不同,因为程序,尤其是高级语言,基本上都是由英语和数字表达式构成的.英语对于程序员十 ...

  10. 关于Vue的组件的通用性问题

    在项目中,经常会有需求让我们把很多通用性的功能写成一个模板,然后根据不同的应用场景传入不同的参数来完成某种功能 但是在很多时候,其实并不是一个模板就能完成所有的功能的 这就需要分类写组件了,但是需求方 ...