当前位置: 首页 > 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
  • [笔记] php常见简单功能及函数
  • chrome扩展demo1-小时钟
  • Cumulo 的 ClojureScript 模块已经成型
  • eclipse的离线汉化
  • Eureka 2.0 开源流产,真的对你影响很大吗?
  • Java Agent 学习笔记
  • Nacos系列:Nacos的Java SDK使用
  • Odoo domain写法及运用
  • overflow: hidden IE7无效
  • PhantomJS 安装
  • ViewService——一种保证客户端与服务端同步的方法
  • windows下使用nginx调试简介
  • 不发不行!Netty集成文字图片聊天室外加TCP/IP软硬件通信
  • 讲清楚之javascript作用域
  • 看图轻松理解数据结构与算法系列(基于数组的栈)
  • 每天10道Java面试题,跟我走,offer有!
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 如何使用 OAuth 2.0 将 LinkedIn 集成入 iOS 应用
  • 三分钟教你同步 Visual Studio Code 设置
  • 小程序测试方案初探
  • 鱼骨图 - 如何绘制?
  • zabbix3.2监控linux磁盘IO
  • 整理一些计算机基础知识!
  • #Js篇:单线程模式同步任务异步任务任务队列事件循环setTimeout() setInterval()
  • #设计模式#4.6 Flyweight(享元) 对象结构型模式
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (delphi11最新学习资料) Object Pascal 学习笔记---第5章第5节(delphi中的指针)
  • (libusb) usb口自动刷新
  • (附源码)php新闻发布平台 毕业设计 141646
  • (附源码)springboot 房产中介系统 毕业设计 312341
  • (六)Hibernate的二级缓存
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (四) 虚拟摄像头vivi体验
  • (四)Android布局类型(线性布局LinearLayout)
  • (一)utf8mb4_general_ci 和 utf8mb4_unicode_ci 适用排序和比较规则场景
  • ***详解账号泄露:全球约1亿用户已泄露
  • .helper勒索病毒的最新威胁:如何恢复您的数据?
  • .net core 使用js,.net core 使用javascript,在.net core项目中怎么使用javascript