关于div一侧固定,另一侧自适应，从文字看出

一侧固定:说明有固定长度,

一侧自适应:说明是按比例缩放

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>

    <title>Untitled Page</title>

    <style type="text/css">

        .box {

            padding-right: 200px;

        }

        .left{
　　　　　　　　/*
　　　　　　　　　　这里主要考虑 margin-right:-300px; 和padding-right:200的比较以及 95%自适应宽度,当页自动缩放还会在同一行
　　　　　　       基本原理在上面已经说明清楚
                 ps: 首先浮动让两个块级元素在同一行,一个向左一个向右 一个设置页面比例和一个设一定的宽度(初步完成)
                 如果没有margin-right:-300px本例还是会撑下去的!
　　　　　　　　*/

            float: right; width:300px; min-height: 500px; margin-right: -300px;  background: red;

        }

        .right {

            float: left; width:95%; min-height:500px; background: green;

        }

    </style>

</head>

<body>

<div class="box">

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

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

</div>

</body>

</html>

关于div一侧固定,另一侧自适应的更多相关文章

  1. 布局：上下两个div高度固定，中间自适应

    需求:经典布局 —— 头尾固定高度中间高度自适应布局 头部固定高度,宽度100%自适应父容器: 底部固定高度,宽度100%自适应父容器: 中间是主体部分,自动填满,浏览器可视区域剩余部分,内容超出则中 ...

  2. xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应

    xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 <div class="dyleft"> ...

  3. 实现三个div，固定左右两边的div宽为200，中间的div宽度自适应的四种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. CSS 实现：两栏布局（一边固定，一边自适应）

    ☊[实现要求]:CSS实现左边固定,右边自适应父容器宽度的两栏布局. <body> <div class="left"></div> <d ...

  5. css 关于两栏布局，左边固定，右边自适应

    好几个星期都没写博客了,最近不忙也不闲,稀里糊涂过了两个星期,之前几个月内天天坚持签到.最近也没签到.哈哈,说正事. 今天做东钿互金平台后台页面,昨天做了一个登录页面,业偶碰到了一个难题.等下也要把它 ...

  6. 纯CSS实现三列布局(两边固定，中间自适应)

    看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝ 看代码: html: <div class="top&qu ...

  7. CSS左侧固定宽 右侧自适应（兼容所有浏览器）

    左侧固定宽,右侧自适应屏幕宽: 左右两列,等高布局: 左右两列要求有最小高度,例如:200px;(当内容超出200时,会自动以等高的方式增高) 要求不用JS或CSS行为实现: 仔细分析试题要求,要达到 ...

  8. CSS 实现左侧固定，右侧自适应两栏布局的方法

    "左边固定,右边自适应的两栏布局",其中有老生常谈的float方法,BFC方法,也有CSS3的flex布局与grid布局.并非所有的布局都会在开发中使用,但是其中也会涉及一些知识点 ...

  9. 多种方法实现左右固定，中间自适应的CSS布局

    布局是面试中常问的问题,尤其是这类的题目,怎么答才好呢? 大多数人的第一个方法是浮动,没错,浮动.第二个方法呢?你回答定位,没错.第三个方法呢?.... 第四个方法呢?第五个方法呢?.... 其实能想 ...

随机推荐

  1. Pipeline 与 xargs

    Pipeline 与 xargs Pipeline与命令行參数 应用程序接收输入的两种方式: 命令行參数 输入字符串被当成參数,通过int main(int argc, char **argv), 中 ...

  2. hdoj 1874 畅通project续【SPFA】

    畅通project续 Time Limit : 3000/1000ms (Java/Other)   Memory Limit : 32768/32768K (Java/Other) Total Su ...

  3. js正则表达式实现手机号码，密码正则验证

    手机号码,密码正则验证. 分享下javascript中正则表达式进行的格式验证,常用的有手机号码,密码等. /** * 手机号码 * 移动:134[0-8],135,136,137,138,139,1 ...

  4. 分布式系统的那些事儿（六） - SOA架构体系

    有十来天没发文了,实在抱歉!最近忙着录视频,同时也做了个开源的后台管理系统LeeCX,目前比较简单,但是后续会把各类技术完善.具体可以点击“原文链接”. 那么今天继续说分布式系统的那些事. 我们现在动 ...

  5. vue全面介绍

    Vue.js 是一个JavaScriptMVVM库,是一套构建用户界面的渐进式框架.它是以数据驱动和组件化的思想构建的,采用自底向上增量开发的设计.相比于Angular.js,Vue.js提供了更加简 ...

  6. 淘宝分布式数据层TDDL

    剖析淘宝 TDDL ( TAOBAO DISTRIBUTE DATA LAYER ) 注:原文:http://gao-xianglong.iteye.com/blog/1973591   前言 在开始 ...

  7. matlab问题集总

    每次更新一点,慢慢增加 nargin nargin是用来判断输入变量个数的函数,这样就可以针对不同的情况执行不同的功能.通常可以用他来设定一些默认值,如下面的函数. 例子,函数test1的功能是输出a ...

  8. Unity编辑器下，界面替换NGUI字体以及字号

    项目中有需要批量替换字体以及字号的需求,一般也就是多语言处理吧. 提供界面如下: 手机拍图,就这样凑合看吧.但是代码不打折. 紧急避让,我只提供修改UILabel以及UIPopupList 下的字体, ...

  9. HBase 管理，性能调优

    设置 Hadoop 来扩展磁盘 I/O 现代服务器通常有多个磁盘硬件来提供大存储能力.这些磁盘通常配置成 RAID 阵列,作为它们的出厂设置.这在很多情况下是有益的,但对 Hadoop 却不是. Ha ...

  10. CSS动画实现菜单栏从左边滑出

    盗用一下图片吧:实际效果图如下: 1,有一个nav的侧边栏,有一个遮罩层,随着侧边栏打开,然后点击遮罩层关闭侧边栏 关键代码: 1.给slideNav(侧边栏设置如下属性) .slideNav { p ...