<!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. 观list.clear()方法 有感

    一 . list.clear()底层源码实现 在使用list 结合的时候习惯了 list=null :在创建这样的方式,但是发现使用list的clear 方法很不错,尤其是有大量循环的时候 1.lis ...

  2. Codeforces - 1194C - From S To T - 子序列 - 排序

    https://codeforces.com/contest/1194/problem/C 好像没什么好说的,要能构造s必须是t的子序列,并且相差的字符集合d是p的子集. 用双指针法求两遍子序列就可以 ...

  3. vue开发 - 根据vue-router的meta动态设置html里title标签内容

    1.路由文件 :router/index.js 添加 meta属性配置: import Vue from 'vue' import Router from 'vue-router' import in ...

  4. Sass函数-Miscellaneous函数（三元条件函数）

    在这里把 Miscellaneous 函数称为三元条件函数,主要因为他和 JavaScript 中的三元判断非常的相似.他有两个值,当条件成立返回一种值,当条件不成立时返回另一种值: if($cond ...

  5. MySQL中常见函数

    一.日期函数 1.NOW()   返回当前日期和时间 mysql> SELECT NOW(); +---------------------+ | NOW() | +-------------- ...

  6. [BZOJ2341][Shoi2011]双倍回文 manacher+std::set

    题目链接 发现双倍回文串一定是中心是#的回文串. 所以考虑枚举#点.发现以\(i\)为中心的双倍回文的左半部分是个回文串,其中心一定位于\(i-\frac{pal[i]-1}2\)到\(i-1\)之间 ...

  7. angular 组件通信

    单页面应用组件通信有以下几种,这篇文章主要讲 Angular 通信 父组件 => 子组件 子组件 => 父组件 组件A = > 组件B 父组件 => 子组件 子组件 => ...

  8. python3输出中文报错的原因，及解决办法（基于pycharm）

    通常python3里面如果有中文,在不连接其他设备和程序的情况下,报错信息大致如下: SyntaxError: Non-UTF-8 code starting with '\xd6' in file ...

  9. ImageField 字段的使用

    Django模型中的ImageField和FileField的upload_to选项是必填项,其存储路径是相对于MEIDA_ROOT而来的.

  10. Cytoscape软件简介

    • Cytoscape一款开源的网络显示和分析软件. 软件的核心部分提供了 网络显示.布局.查询等方面的基本功能. • Cytoscape源自系统生物学,通过Cytoscape,用户可以在可视化的 环 ...