<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .box {

            margin-top: 200px;

            height: 50px;

            background-color: pink;

        }

        .left {

            width: 50px;

            height: 50px;

            background-color: deepskyblue;

            /*左边的盒子左浮动*/

            float: left;

        }

        .right {

            /*box-sizing: border-box;*/

            /*padding-left: 50px;*/

            height: 50px;

            background-color: orangered;

            /*右边的盒子设置overflow:hidden*/

            overflow: hidden;

        }

    </style>

</head>

<body>

<div class="box">

    <div class="left">

        左边固定宽度

    </div>

    <div class="right">

        右边宽度自适应, 右边宽度自适应, 右边宽度自适应,右边宽度自适应,

        右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,

        右边宽度自适应, 右边宽度自适应, 右边宽度自适应, 右边宽度自适应,

    </div>

</div>

</body>

</html>

　　

利用float与overflow:hidden实现移动端两栏自适应布局的更多相关文章

  1. 解决overflow: hidden在移动端失效问题

    1.问题:移动端出现弹窗后,滑动页面,页面底部出现空白 二.原因 经过分析,发现overflow: hidden;在移动端失效,导致弹窗出现时,滑动页面,页面底部出现空白. 三.解决 参考网址:htt ...

  2. 简明的例子讲解position:relative、float、overflow:hidden和inline-block

    标签(空格分隔): css relative float 我们通过一个简单的实验来了解position:relative float overflow:hidden 和 inline-block. 下 ...

  3. 给元素设置overflow:hidden，pc端正常，但移动端依然可以滑动

    给设置overflow:hidden的元素设置position:fixed即可解决

  4. 移动端Web App自适应布局探索

    1.困扰多时的问题 在这之前做Web App开发的的时候,在自适应方面一般都是宽度通过百分比,高度以iPhone6跟iPhone5之间的一个平衡值写死,我们的设计稿都是iPhone5的640 * 11 ...

  5. 移动端web app自适应布局探索与总结

    要掌握的知识点: iphone6 屏幕尺寸为 375*667 (pt)也就是 网页 全屏显示时候 document.documentElement.clientWidth------可以理解为屏幕越大 ...

  6. 溢出overflow: hidden

    如果要防止内容把div容器或者表格撑大,可以在CSS中设置一.overflow: hidden; 表示如果内容超出容器大小,就把超出部分隐藏(相当于切掉)二.overflow: scroll; 这个表 ...

  7. css中：overflow:hidden清除浮动的原理

    要想彻底清除浮动的影响,适合的属性不是 clear 而是 overflow. 一般使用 overflow:hidden,利用 BFC 的“结界”特性彻底解决浮动对外部或兄弟元素的影响. 1. 前言: ...

  8. overflow:hidden清除浮动原理解析及清除浮动常用方法总结

    最近在看<CSS Mastery>这本书,里面有用overflow:hidden来清理浮动的方法.但是一直想不明白为什么能够实现清除浮动,查阅了网络上的解释,下面来总结一下. 一.首先来想 ...

  9. 神奇的overflow:hidden及其背后的原理

    先来看两个overflow:hidden的使用例子 1.嵌套布局内部块元素设置float:left时,导致外部元素塌方,高度为0的问题. <div class="wrap"& ...

随机推荐

  1. PHP_CodeIgniter Github实现个人空间

    github支持github Pages 可以实现自己的个人空间 XXX.github.io/project 1 注册自己的github账户 2 需要设置自己的user_name, user_name ...

  2. Oracle-随笔笔记

    1.重命名数据库表.重命名字段 alter table tablename1 rename to tablename2; alter table tablename1 rename column co ...

  3. Struts2+Ajax实现数据交互

    1.导入jar包 struts核心包: json需要的包: 2.配置web.xml <filter> <filter-name>struts2</filter-name& ...

  4. python学习第四天基本数据类型 int，string，bool

    python跟其他编程语言一样,拥有基本的数据类型,计算机 只能识别0101,python是解释语言,有其他的解释器 python整型 int a=10 type(a) "int| pyth ...

  5. 没有找到mspdb80.dll，因此这个应用程序未能启动...问题解决

    这里主要针对使用link.exe进行SIG文件制作时,报错. 首先下载,mspdb80.dll:https://www.lanzous.com/i59dgfi 将dll文件移动到我的电脑(32位)C: ...

  6. vue-froala-wysiwyg 富文本编辑器

    近期需要在vue3项目上做一个富文本编辑器,找了很多插件组件,最终决定用 froala.虽然不是免费的,但是功能实在是太强大了. froala 文档:https://www.froala.com/wy ...

  7. 微信小程序（17）-- RSA加密 解密 加签 验签

    RSA加密 解密 加签 验签 /** * 注:区分RSA私钥的类型,有pkcs1和pkcs8.pkcs8格式的私钥主要用于Java中 pkcs1格式: -----BEGIN RSA PRIVATE K ...

  8. 前端学习(三十五）模块化es6（笔记）

    RequireJs:一.安装.下载    官网: requirejs.org    Npm:  npm i requirejs二.使用    以前的开发方式的问题:        1).js 是阻塞加 ...

  9. Vue-系统修饰键

    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器. .ctrl .alt .shift .meta 例如: 例如: <!-- Alt + C --> <input ...

  10. No enclosing instance of type TestGson is accessible. Must qualify the allocation with an enclosing instance of type TestGson (e.g. x.new A() where x is an instance of TestGson).

    main方法中实例化内部类报错: public class TestGson { public static void main(String[] args) { Gson gson=new Gson ...