<!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. mysql解析json字符串相关问题

    很多时候,我们需要在sql里面直接解析json字符串.这里针对mysql5.7版本的分水岭进行区分. 1.对于mysql5.7以上版本 使用mysql的内置函数JSON_EXTRACT(column, ...

  2. 好书推荐---Python网络编程基础

    Python网络编程基础详细的介绍了网络编程的相关知识,结合python,看起来觉得很顺畅!!!

  3. python学习二十四天函数参数之默认参数

    函数参数就是向函数传递参数,可以传递一个,可以是更多个,有的参数有值,有的没有,函数可以设置默认参数,默认参数必须放参数最后面. 1,不传递参数,设置默认参数 def hello(a,b,c='123 ...

  4. P3826 [NOI2017]蔬菜

    传送门 注意每一单位蔬菜的变质时间是固定的,不随销售发生变化 固定的...... 就是每一个单位的蔬菜在哪一天变质是早就定好了的 发现从第一天推到最后一天很不好搞 考虑反过来,从最后一天推到第一天,这 ...

  5. 排序---快速排序及其切分函数Partition应用

    快速排序   快速排序通过一个切分元素将数组分成两个子数组,左子数组小于等于切分元素,右子数组大于切分元素,将这两个子数组排序,也就是将整个数组排序了. 代码如下: public class Sort ...

  6. elasticsearch 基础 —— _mget取回多个文档及_bulk批量操作

    取回多个文档 Elasticsearch 的速度已经很快了,但甚至能更快. 将多个请求合并成一个,避免单独处理每个请求花费的网络延时和开销. 如果你需要从 Elasticsearch 检索很多文档,那 ...

  7. MySQL数据库使用xtrabackup备份实现小例子

    关于MySQL数据库的备份的工具和方式也比较多,本文只简单介绍一些我司一个平台的备份方案.Xtrabackup是由percona开源的免费数据库热备份软件,但是只能对InnoDB数据库和XtraDB存 ...

  8. 初学Java 数值运算符

    import java.util.Scanner; public class DisplayTime { public static void main(String[] args) { Scanne ...

  9. contos7安装jdk1.8和tomcat8

    前言 oracle官网下载jdk需要登录,网上携带cookie的方法已经不可用,我自己把jdk下载后放到了自己的服务器上,有需要的可以直接下载. 下载地址 http://149.129.124.185 ...

  10. gps位置坐标转百度坐标

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...