当前位置: 首页 > news >正文

css中flex两列布局(一列自适应其他固定)

问题

最近写一个布局的时候,遇到一个问题。如下图的布局。在没有图片的时候布局是正常的,如果有图片且设置了width:100%;height: 100%; 则会出现图片将自适应布局撑开的情况。

我的解决方式是让图片不缩放,图片外层再添加一个div元素。形如下图:

大家有什么更好的方式麻烦告知我一下呗,多谢!

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><style>.container {display: flex;}.flex1,.flex2 {display: flex;flex-direction: column;margin-top: -5px;}.fixed-div {height: 100px;width: 200px;background-color: #f1f1f1;margin-right: 10px;margin-top: 5px;}.flexible-div {flex: 1 1 100%;height: 100px;width: 200px;background-color: #00aaff;margin-right: 10px;margin-top: 5px;}</style><div class="container"><div class="flex1"><div class="flexible-div"></div><div class="fixed-div"></div><div class="fixed-div"></div><div class="fixed-div"></div><div class="fixed-div"></div></div><div class="flex2"><div class="flexible-div"><img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" /></div><div class="fixed-div"></div><div class="fixed-div"></div><div class="fixed-div"></div><div class="fixed-div"></div></div></div></body>
</html>

效果

相关文章:

  • 专业远程控制如何塑造安全体系?向日葵“全流程安全闭环”解析
  • 基于 STM32Cube.AI 的嵌入式人脸识别算法实现
  • Flink-简介与基础
  • docker 部署hbase 并且java Api连接
  • Nginx安装与配置、使用Nginx负载均衡及动静分离、后台服务部署、环境准备、系统拓扑图
  • spark的算子
  • Web3与Web3.0: Web3指的是去中心化和基于区块链的网络,Web3.0指的是链接或语义网络。
  • 讲述 什么是鸿蒙 为什么需要鸿蒙 为什么要学习鸿蒙
  • 网络攻击的常见手段
  • DataFunSummit:2023年现代数据栈技术峰会-核心PPT资料下载
  • Unity开发之C#基础-File文件读取
  • 合肥中科深谷嵌入式项目实战——基于ARM语音识别的智能家居系统(三)
  • 机器视觉技术在现代汽车制造中的应用
  • 基本锁介绍
  • Multi-Modal Multi-Stream UNET Model for Liver Segmentation
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • 002-读书笔记-JavaScript高级程序设计 在HTML中使用JavaScript
  • 2017-08-04 前端日报
  • 77. Combinations
  • canvas实际项目操作,包含:线条,圆形,扇形,图片绘制,图片圆角遮罩,矩形,弧形文字...
  • download使用浅析
  • ES6语法详解(一)
  • golang 发送GET和POST示例
  • Java到底能干嘛?
  • java中的hashCode
  • JS实现简单的MVC模式开发小游戏
  • OpenStack安装流程(juno版)- 添加网络服务(neutron)- controller节点
  • 表单中readonly的input等标签,禁止光标进入(focus)的几种方式
  • 从地狱到天堂,Node 回调向 async/await 转变
  • 汉诺塔算法
  • 聚簇索引和非聚簇索引
  • 码农张的Bug人生 - 初来乍到
  • 数据结构java版之冒泡排序及优化
  • 通信类
  • mysql面试题分组并合并列
  • ​卜东波研究员:高观点下的少儿计算思维
  • #我与Java虚拟机的故事#连载01:人在JVM,身不由己
  • (附源码)php新闻发布平台 毕业设计 141646
  • (附源码)spring boot校园健康监测管理系统 毕业设计 151047
  • (附源码)springboot猪场管理系统 毕业设计 160901
  • (算法设计与分析)第一章算法概述-习题
  • (一)Thymeleaf用法——Thymeleaf简介
  • .Family_物联网
  • .net CHARTING图表控件下载地址
  • .Net MVC + EF搭建学生管理系统
  • .NET WebClient 类下载部分文件会错误?可能是解压缩的锅
  • .NET 使用配置文件
  • .NET6 命令行启动及发布单个Exe文件
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .NET微信公众号开发-2.0创建自定义菜单
  • .NET正则基础之——正则委托
  • @Builder用法
  • @FeignClient 调用另一个服务的test环境,实际上却调用了另一个环境testone的接口,这其中牵扯到k8s容器外容器内的问题,注册到eureka上的是容器外的旧版本...
  • [Android] Upload package to device fails #2720
  • [Android]一个简单使用Handler做Timer的例子