实际项目开发过程中遇到页面 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. jquery基础介绍-转

    学习目的:理解 Ajax 及其工作原理,构建网站的一种有效方法. Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程 ...

  2. Crontab 学习

    分钟 小时 日期 月份 星期几 整点执行 0 8-22 * * * /usr/bin/php /home/anbaojia/wwwroot/shjn/yii report/sync 查看 cron 执 ...

  3. Spring(十七)之表单处理

    表单处理在实际开发中,非常常见,比如登录.注册或者新增.修改等等. 希望本示例对于初学者有一定的提升和帮助 该表单实例,主要说明MVC,相当于前台表单提交,提交相当于一个Http请求,这个请求通过Co ...

  4. Windows 使用iCloud日历

    作者:Lumos Night链接:https://www.zhihu.com/question/34287617/answer/97299386来源:知乎著作权归作者所有.商业转载请联系作者获得授权, ...

  5. TensorFlow创建简单的图片分类系统--机器学习

    TensorFlow 参考链接 http://www.wolfib.com/Image-Recognition-Intro-Part-1/ 环境要求 linux amd64(必须是64位处理器)pyt ...

  6. java中prepareStatement与createStatement的区别

    首先来看两段代码: 第一个使用createStatement() public void delete( int id){ try { Connection c = DBUtil.getConnect ...

  7. 流Stream 文件File 流IO

    Java 流(Stream).文件(File)和IO Java.io 包几乎包含了所有操作输入.输出需要的类.所有这些流类代表了输入源和输出目标. Java.io 包中的流支持很多种格式,比如:基本类 ...

  8. EF Core 2.0中Transaction事务会对DbContext底层创建和关闭数据库连接的行为有所影响

    数据库 我们先在SQL Server数据库中建立一个Book表: CREATE TABLE [dbo].[Book]( ,) NOT NULL, ) NULL, ) NULL, ) NULL, [Cr ...

  9. 如何在运行jar指定使用的JDK

    写一个.bat文件 例如在同文件夹下,新建一个run.bat文件 run.bat 的内容是如下: set JAVA_HOME=C:\jdk1.7.0_67set CLASSPATH=.;%JAVA_H ...

  10. 使用apt-get install时如何指定安装版本

    命令语法如下: sudo apt-get install package=version 例如: sudo apt-get install samba=2:4.4.5+dfsg-2ubuntu6