关于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. 两条命令在Linux主机之间建立信任关系

    ssh-keygen -t rsa -P "" -f ~/.ssh/id_rsa //生成当前用户密钥 ssh-copy-id -i /root/.ssh/id_rsa.pub r ...

  2. [na]交换机接口文档

    文档中有一些数据包等附件,pdf不能看,去这里.http://note.youdao.com/share/?id=5319680eb0c8b9c3f8fefd157534fd90&type=n ...

  3. 认识和使用Task

    对于多线程,我们经常使用的是Thread.在我们了解Task之前,如果我们要使用多核的功能可能就会自己来开线程,然而这种线程模型在.net 4.0之后被一种称为基于“任务的编程模型”所冲击,因为tas ...

  4. 菜鸟学SSH（十四）——Spring容器AOP的实现原理——动态代理

    之前写了一篇关于IOC的博客——<Spring容器IOC解析及简单实现>,今天再来聊聊AOP.大家都知道Spring的两大特性是IOC和AOP,换句话说,容器的两大特性就是IOC和AOP. ...

  5. What-are-P-NP-NP-complete-and-NP-hard

    https://www.amazon.com/Computational-Complexity-Approach-Sanjeev-Arora/dp/0521424267 http://theory.c ...

  6. 每日英语：5 Things to Know About Missing Malaysia Airlines Flight and Air Safety

    Malaysia Airlines Flight MH370, with 239 people aboard, lost contact early Saturday with the airline ...

  7. 每日英语：The Benefits of a Sleep Buddy

    Stolen sheets, snoring and hot flashes are just some of the annoyances that lead a quarter of U.S. c ...

  8. Silverlight-MEF-DEMO

    “托管扩展性框架(Managed Extensibility Framework,简称MEF),是微软.NET框架下为提高应用和组件复用程度而推出的,用于使组件能够最大化的重用.使用MEF能够使静态编 ...

  9. ubuntu 16.04如何生成ssh key以及如何查看ssh key

    检查本地是否有SSH Key存在 在终端输入 ls -al ~/.ssh 如果输出的是: No such file or directory 那就没有ssh key 如果有就会出现这样: 生成新的SS ...

  10. Android Studio preview 不显示，程序运行正常

    答案来自 stack flow 修改: res -> values -> style.xml style name="AppTheme" parent="Ba ...