css 宫格样式内容上下结构

news2024/9/29 22:49:34

在这里插入图片描述
结构

<div  class="sc-content-group">
     <div class="sc-content-item">
         <div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div>
         <div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div>
      </div>
         <div class="sc-content-item">
         <div class="sc-item-img"><el-image :src="src" :preview-src-list="[src]"></el-image></div>
         <div class="sc-item-check"><el-checkbox v-model="checked">存在缺陷</el-checkbox></div>
      </div>
</div>

样式

 .sc-content-group {
    display: flex;
    flex-wrap: wrap;  //一行超出 换行
  }
  .sc-content-item {
    padding: 5px;
    display: flex;
    flex-direction: column; //内容上下
  }
    .sc-item-img{
    height: 90px;
    width: 120px;
  }
  .sc-item-check{
    padding-left: 15px;
  }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2066384.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

放弃你的 KPI。改用这种方法

如果您和我一样&#xff0c;那么大约十二年前&#xff0c;您就因为 Eric Ries 而加入了 MVP/精益创业潮流。谁不想“利用持续创新打造出极为成功的企业”呢&#xff1f; 但当你读到这句话时&#xff0c;你可能会注意到一些事情。精益求精并专注于最低限度的可行性是给初创公司的…

深入了解Elasticsearch集群:Elasticsearch集群的工作原理与优化策略

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 ELasticsearch作为一个分布式搜索引擎&#xff0c;能够出色地支持集群模式、动态水平扩容、故障转移等分布式系统特性&…

第二证券:什么是股票打板?怎么打板?

打板&#xff0c;指的是在股价即将涨停或许涨停之后再进行挂单介入&#xff0c;不涨停不进入&#xff0c;股票打板寻求的是出资更大的确认性。 打板的步骤&#xff1a; 1、复盘并对下一个交易日行情进行判别 出资者能够把其时交易日的商场条理树立清楚&#xff0c;找出主线板…

PWM驱动电机系列——PID控制 (各电机设备之间的驱动差异及区别)自动控制系统的性能指标

电机驱动 直流电机&#xff1a;类似于驱动LED亮灭一样&#xff0c;根据电机的电路原理图判断是什么数字电平有效。 步进电机&#xff1a;类似于驱动LED的周期翻转一样&#xff0c;在一个周期里面进行对步进电机的IO电平的自动翻转&#xff0c;LED!LED 。(1)使用的定时器方式&…

C#/WinForm实现炸弹人游戏

游戏类设计 代码地址&#xff08;gitee&#xff09;&#xff1a;炸弹人游戏: WinForm实现炸弹人游戏

开源大屏设计工具DataRoom

DataRoom是一个开源项目&#xff0c;主要作为一个数据共享与协作平台&#xff0c;同时也具备大屏可视化设计器的功能。 开源地址&#xff1a;DataRoom: &#x1f525;基于Vue的大屏可视化设计器&#xff0c;前后端一体化解决方案&#xff0c;几十种炫酷图表&#xff0c;支持多种…

曝光无线领夹麦克风选购五大陷阱:选麦克风谨防音质粗劣夸大宣传

在移动录制与现场直播日益普及的时代背景下&#xff0c;无线领夹麦克风成为了众多专业人士与爱好者的首选装备。但在这个看似大热的市场背后&#xff0c;却隐藏着不少消费者难以察觉的“坑”。部分品牌为了抢占市场份额&#xff0c;不惜以牺牲品质为代价&#xff0c;通过夸大宣…

如何使用cornerstone3D渲染3D影像

&#x1f353; 前言 在日常开发中经常会遇到除了渲染MPR视图外&#xff0c;还需要渲染3D扫描影像&#xff0c;本文从具体的实现、viewport type解读、场景预设等方面来介绍3D具体的实现及涉及到的相关概念。 &#x1f951; 效果演示 点击查看完整代码 &#x1f352; 实现及概…

ArcMap教程(01):制作人口专题图

文章目录 01、ArcGIS专题图制作第一步:插入数据框第一步:加载人口分级地图第二步:添加范围指示器第三步:修改样式1、添加标题2、添加比例尺3、添加指北针4、插入图例01、ArcGIS专题图制作 第一步:插入数据框 1、工具栏【插入】–>【数据库】 2、选中图层下的【宜昌市…

Python酷库之旅-第三方库Pandas(092)

目录 一、用法精讲 391、pandas.Series.hist方法 391-1、语法 391-2、参数 391-3、功能 391-4、返回值 391-5、说明 391-6、用法 391-6-1、数据准备 391-6-2、代码示例 391-6-3、结果输出 392、pandas.Series.to_pickle方法 392-1、语法 392-2、参数 392-3、功能…

token令牌,过滤器,JWT,拦截器

令牌(token)技术 不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了 1.基本流程 用户使用用户名密码来请求服务器 服务器进行验证用户的信息 服务器通过验证发送给用户一个token 客户端存储token&#…

大模型学习笔记 - LLM 之 LLaMA系列(待更新)

LLaMA 系列 LLaMA 概述 LLaMA-1LLaMA-2LLaMA-3 LLaMA 概述 LLaMA: Open and Efficient Foundation Language Models Llama 2: Open Foundation and Fine-Tuned Chat Models (LLama2 & LLama2-Chat) LLama 3 | LLama 3.1 LLaMA-1 涉及到的基础知识点: pre-normalizat…

Leetcode面试经典150题-25.K个一组反转链表

解法都在代码里&#xff0c;不懂就留言或者私信 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* ListNode(int val, ListNode next) { this.val …

基于java图书销售管理系统设计与实现

1引言 随着Internet国际互联网的发展&#xff0c;越来越多的企业开始建造自己的网站。基于Internet的信息服务&#xff0c;商务服务已经成为现代企业一项不可缺少的内容。很多企业都已不满足于建立一个简单的仅仅能够发布信息的静态网站。现代企业需要的是一个功能强大的&…

利用API返回值实现商品信息的自动化更新

利用API返回值实现商品信息的自动化更新是一个涉及到数据交互、数据处理和自动化脚本编写的任务。以下是一个基本的步骤指南&#xff0c;帮助你实现这一过程&#xff1a; 1. 确定API接口 首先&#xff0c;你需要确定能够提供商品信息的API接口。这通常是由商品数据提供商&…

2024年培训服务行业CRM研究报告

国家实行“双减”政策后&#xff0c;很多教培企业慢慢淡出了公众的视野&#xff0c;很多人觉得&#xff0c;教培行业怕是要日薄西山了。 但如果你了解了培训服务行业到底有多庞大&#xff0c;你就会立即改变自己的想法。 从2017年起&#xff0c;中国职业培训机构的年注册量超…

X86架构基础

X86目前的架构有32位和64位两种&#xff0c;不同的架构支持的运行模式也是不一样的&#xff0c;64位的基本能兼容32位。64位是X86架构的主流&#xff0c;本文内容默认以64位位基础。X86平台目前的支持的运行模式有以下几种&#xff1a; 1、实模式&#xff1a;这是最早的X86运行…

ue5远程渲染和本地渲染的区别,及云渲染的联系

UE5这款引擎以其令人惊叹的渲染能力&#xff0c;为游戏开发者们打开了一扇通往视觉盛宴的大门。但是在UE5的世界里&#xff0c;渲染技术其实还有着本地渲染和远程渲染之分&#xff0c;而且它们与时下大热的云渲染技术也有着千丝万缕的联系。本文主要说明UE5中的远程渲染和本地渲…

鲜为人知的 9 种人工智能工具

这套 AI 工具确实与众不同。您可能在其他地方读到过&#xff0c;图像生成需要大量工作。使用 AI 工具制作网站也需要大量工作。此列表涵盖了我在过去几个月发现的一些前沿项目&#xff0c;它们在很多方面都很有用。 如果您没有时间阅读最新的营销书籍&#xff0c;SoBrief 是个不…

Semantic Kernel进阶:多模型的支持

大家可能已经知道&#xff0c;Semantic Kernel默认主要支持两款模型&#xff1a;OpenAI和AzureOpenAI。对于开发者来说&#xff0c;这显然是不够的&#xff0c;尤其是当我们希望对接国内的一些强大模型&#xff0c;比如百度的文心一言、阿里的通义千问、搜狗的百川、智谱ChatGL…