flex 左右布局-----在手机端,当左侧宽度固定,右侧宽度自适应时,右侧会超出浏览器窗口的问题解决方案
废话不多说:直接上代码解决问题;
父级:
.parent {
display: flex;
flex-flow: row;
}
子级:
.left-child {
width:100px;
}
.right-child {
flex:1;
overflow:hidden;/width:0;
}
注解:当不给right-child设置宽度,那么其会被自己的子节点无限撑开
flex 左右布局-----在手机端,当左侧宽度固定,右侧宽度自适应时,右侧会超出浏览器窗口的问题解决方案的更多相关文章
- css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style
css 两列 左侧列固定 width: 100px; float: left; 右侧列自适应 margin-left:100px; 注意要用在div上的style .con1{ width: 100p ...
- CSS自适应布局(包括两边宽度固定中间宽度自适应与中间宽度固定两边宽度自适应)
1.两边宽度固定,中间宽度自适应 (1)非CSS3布局,浮动定位都可以(以下用浮动) css样式: #left { float: left;width: 200px; background: lime ...
- css布局------左右宽度固定,中间宽度自适应容器
HTML /*适用方法1,方法2*/<body> <div class="container"> <div class="left" ...
- CSS两列布局——左侧宽度固定,右侧宽度自适应的3种方法
1.左侧绝对定位法 直接看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 如何用CSS实现左侧宽度固定,右侧自适应(两栏布局)?左右固定中间自适应(三栏布局)呢?
在前端日常布局中,会经常遇到左侧宽度固定,右侧自适应或者左右两边固定,中间部分自适应的实用场景.本文例子中将列举出两种常用的两栏布局,左侧固定右侧自适应的常用方法以及代码和五种左右固定中间自适应的常用 ...
- css实现div两列布局——左侧宽度固定,右侧宽度自适应(两种方法)
原文:css实现div两列布局--左侧宽度固定,右侧宽度自适应(两种方法) 1.应用场景 左侧一个导航栏宽度固定,右侧内容根据用户浏览器窗口宽度进行自适应 2.思路 首先把这个问题分步解决,需要攻克以 ...
- flex页面布局练习--知乎
采用flexbox弹性容器 在手机端进行页面布局 样本地址: http://tpl.zhuamimi.cn/%E6%89%8B%E6%9C%BA%E7%AB%AF%E9%A1%B5%E9%9D%A2- ...
- CSS 布局实例系列(三)如何实现一个左右宽度固定,中间自适应的三列布局——也聊聊双飞翼
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
- CSS3新属性之---flex box布局实例
flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...
- 前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
题目:假设高度已知,请写出三栏布局,其中左栏.右栏宽度各为300px,中间自适应. [题外话:日常宣读我的目标===想要成为一名优雅的程序媛] 一.分析 1. 题目真的像我们想得这么简单吗? 其实不然 ...
随机推荐
- 导出excel文件接口代码示例
导出excel文件接口代码示例 1.该导出接口,token不能通过请求头来传输,需要在get请求的参数中带出来2.验证token的方法除了在拦截器中统一拦截,针对get接口传参数的方式也需要单独在接口 ...
- 为什么https要使用证书
为什么https要使用证书 什么是httpshttps不是一种新的协议,只是http的通信接口部分使用了ssl和tsl协议替代,加入了加密.证书.完整性保护的功能. 加密:共享密钥加密加密和解密公用一 ...
- UICollectionView滑动流畅性优化
UICollectionView滑动流畅性优化 前言 初始的collection view在滑动时都是十分流畅的,然而因为collection view cell 加载更多的内容时因为主线程耗用太多性 ...
- DDD 笔记
1. 简单讲讲DDD,和DDD哪些优势 领域驱动设计.就是通过领域来指导软件设计,是一种十分抽象的软件设计思想,它主要分为战略设计和战术设计 战略方面,通过事件风暴进行领域模型的划分,划分出核心域,子 ...
- 为什么不推荐使用Linq?
相信很多.NETer看了标题,都会忍不住好奇,点进来看看,并且顺便准备要喷作者! 这里,首先要申明一下,作者本人也非常喜欢Linq,也在各个项目中常用Linq. 我爱Linq,Linq优雅万岁!!!( ...
- Ubuntu 18.04 安装OneDrive自动同步
Ubuntu 18.04 安装OneDrive自动同步 Windows10系统已经自带了OneDrive的自动同步功能,对于多设备用户而言已经成为了一个非常方便传输保存文件的途径,在Ubuntu下也有 ...
- Legacy (线段树优化建图)
题目链接:Legacy - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 题解: 考虑题目中一个点向区间连边,如真的对区间中的每一点分别连边后跑最短路,时间空间都要炸. 因为是一个点向 ...
- C#中?.、??、?:、及?等符号用途
1.可空类型修饰符(?) 众所周知,在C#中引用类型可以使用一个null引用来表示一个不存在的值,比如 string str = null 是正确的: 但是值类型却不能为空,比如 int k = ...
- SSM中Mybatis的配置
注:数据库连接(此过程不当做本次笔记重点,只做简单概述) 1.创建并配置jdbc.properties文件 2.通过Druid连接池配置连接数据库 3.将数据源(dataSource)注入IOC 详细 ...
- 洛谷P1003
洛谷P1003 题目大意 简而言之就是在坐标轴上铺地毯,根据输入的坐标将地毯放在坐标轴上,然后最后给出一个坐标,找到铺在这个坐标上最上面的地毯编号 Train of thought 首先我们应该找到每 ...