<!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. 国内常用Linux镜像站点

    网易镜像站点 http://mirrors.163.com/ 搜狐镜像站点 http://mirrors.sohu.com/ 阿里云镜像站点 http://mirrors.aliyun.com/ 北京 ...

  2. RMQ（连续相同最大值）

    http://poj.org/problem?id=3368 Frequent values Time Limit: 2000MS   Memory Limit: 65536K Total Submi ...

  3. [Codeforces 639F] Bear and Chemistry (Tarjan+虚树)(有详细注释)

    [Codeforces 639F] Bear and Chemistry(Tarjan+虚树) 题面 给出一个n个点,m条边的无向图(不保证连通,可能有自环和重边),有q次询问,每次询问给出p个点和q ...

  4. 爬虫之requests模块的使用

    requests模块 概念:基于网络请求的模块 作用:用来模拟浏览器发请求,从而实现爬虫 环境安装:pip install requests 编码流程: 指定url 发起请求 获取响应数据 持久化存储 ...

  5. UVALive 6270 Edge Case（找规律，大数相加）

    版权声明:本文为博主原创文章,未经博主同意不得转载. vasttian https://blog.csdn.net/u012860063/article/details/36905379 转载请注明出 ...

  6. Linux文件行排序

    sort:对文件的行排序 - 准备一份文件:char.txt - sort char.txt:结果会按照头字母顺序排 - sort -o sortchar.txt char.txt:排序char.tx ...

  7. 本机ip地址怎么查

     转自:https://www.192ly.com/basic/local-ip-address-lookup-method.html 百度搜索一下[IP],你就可以轻松看到你的IP地址了,百度出来的 ...

  8. 关于同PC上存在多个版本的GeneXus

    如题 有的时候需要在不同的版本上开发  如我一般 有四个版本IDE 那么有的时候可能在安装的时候 提示安装失败 比如这样 这个时候你需要将安装好的GeneXus安装目录 全部备份一下 然后  从控制面 ...

  9. C++使用函数strcpy出现bug: 错误 C4996 'strcpy': This function or variable

    C++中使用函数strcpy时出现问题: 解决方案: 在文件开头添加语句: #pragma warning(disable:4996) done! 剑指offer: 第一题:赋值运算符函数 #incl ...

  10. JDBC之Statement、PreparedStatement和CallableStatement

    JDBC提供了Statement.PreparedStatement和CallableStatement三种方式来执行查询语句,其中Statement用于通用查询,PreparedStatement用 ...