<!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. android测试开发概念

    一:测试分类 1.分类概览 按测试阶段划分: 单元测试 集成测试 系统测试 验收测试 按是否覆盖源代码: 黑盒测试: 功能测试: 界面测试 逻辑测试 安装测试 应用性测试 兼容性测试 性能测试: 稳定 ...

  2. 运输计划(题解)(Noip2015)

    运输计划(题解)(Noip2015) 二分答案+树上差分 树上差分其实不难,只是名字高大尚,可以学一下:Eternal风度的树上差分 本人博客里也总结了一些其他的知识供大家学习:Eternal风度的博 ...

  3. 59-python基础-python3-集合-集合常用方法-判断一个集合是否是另一个集合的子集-issubset()-issuperset()

    判断一个集合是否是另一个集合的子集-issubset()-issuperset() 1-issubset() s1.issubset(s) 判断s1是否是s的子集 2-issuperset() 与is ...

  4. Kernel Page Global Directory (PGD) of Page table of Process created in Linux Kernel

    Kernel Page Global Directory (PGD) of User process created 在早期版本: 在fork一个进程的时候,必须建立进程自己的内核页目录项(内核页目录 ...

  5. JavaScript—创建正则对象

    创建正则对象 方式1: var reg = new RegExp('\d', 'i');var reg = new RegExp('\d', 'gi'); 方式2: var reg = /\d/i;v ...

  6. Linux学习笔记之VIM编辑器

    此处根据需要,只罗列一些常用的指令和用法 五．VIM程序编辑器 Vi与vim Vi打开文件没有高亮注释,vim有,且vim是vi的高级版本 Vim默认打开文件为命令模式 i               ...

  7. 121-基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 机器人主板

    基于TI DSP TMS320DM8148的全高清1080P 60fs的视频编解码系统 一.板卡概述 本系统基于最先进的DSP技术,构建一个全高清的视频编解码系统,采用TI的芯片.借助TI的DaVin ...

  8. MySQL--17 配置binlog-server 及中间件

    目录 配置binlog-server MySQL中间件Atlas Atlas管理接口 配置binlog-server 修改mha配置文件 [root@mysql-db03 ~]# vim /etc/m ...

  9. Django 高级配置

    目录 Django 信号 信号系统三要素: 信号的分类: Django 内置信号: 具体 Django 信号内容 定义信号 发送信号 接收信号 信号接收器 防止重复信号 Django 内置信号操作步骤 ...

  10. Android使用gradle依赖管理、依赖冲突终极解决方案（转）

    Android使用gradle依赖管理.依赖冲突终极解决方案在Android开发中,相信遇到关于版本依赖的问题的同学有不少.虽然Android Studio一般都会自动帮我们去重,但是有时候去重失败了 ...