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. 题目真的像我们想得这么简单吗? 其实不然 ...
随机推荐
- debian使用桌面管理器管理多个桌面系统
环境:debian12.x 前言:我安装了debian12版本的操作系统在虚拟机中,在安装的时候选择的是KDE桌面,便于以后日常使用linux操作系统 在安装KDE桌面后,会自动安装一个sddm,sd ...
- iterrows()
iterrows() 是 Pandas 库中 DataFrame 对象的一个方法,它允许你迭代 DataFrame 的行.当你有一个 DataFrame 并且想要逐行访问数据(或者基于每一行的数据做一 ...
- Fastjson基础环境配置与Java基础概念
Preface 此篇系列文章将会从 Java 的基础语法开始,以 Fastjson 的各个反序列化漏洞分析为结尾,详细记录如何从一个具有基础面向对象编程但毫无 Java 基础的小白成长为了解 Fast ...
- .Net Framework使用Autofac实现依赖注入
.Net Framework使用Autofac实现依赖注入 前言 最近也是找了快2周的工作了,收到的面试邀请也就几个,然后有个面试题目是用asp.net mvc + Entityframework 做 ...
- 在Linux驱动中使用regmap
背景 在学习SPI的时候,看到了某个rtc驱动中用到了regmap,在学习了对应的原理以后,也记录一下如何使用. 介绍 在Linu 3.1开始,Linux引入了regmap来统一管理内核的I2C, S ...
- k8s网络原理之flannel
首先当你创建一个k8s集群后一般会存在三种IP分别是,Pod IP,Node IP,Cluster IP 其中一个Cluster IP之下包含多个Node IP,而一个Node IP之下又包含多个Po ...
- 【动画进阶】类 ChatGpt 多行文本打字效果
今天我们来学习一个有意思的多行文本输入打字效果,像是这样: 这个效果其实本身并非特别困难,实现的方式也很多,在本文中,我们更多的会聚焦于整个多行打字效果最后的动态光标的实现. 也就是如何在文本不断变长 ...
- 用const修饰指针
1)常量指针 语法:const 数据类型 *变量名; 不能通过解引用的方法修改内存地址中的值(用原始的变量名是可以修改的). 注意: l 指向的变量(对象)可以改变(之前是指向变量a的,后来可以改为指 ...
- SpringBoot 1.x 2.x配置文件指定服务项目名
SpringBoot版本1.x: server.context-path=/demo SpringBoot版本2.x: server.servlet.context-path=/demo
- 背景色透明度兼容IE8的写法
本文为Echoyya.所创,转载请带上原文链接,感谢 https://www.cnblogs.com/echoyya/p/14236242.html 通常的做法 目前大多数浏览器都支持 CSS3,只需 ...