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

CSS 布局案例： 2行、多行每行格数不定，最后一列对齐

news 2026/5/22 14:33:10

布局期望的效果如下：

第二行最后一格与第一行最后一格对齐。每行格数不定。自动拉伸填充整个宽度

实现：

一开始打算用display:flex， 自动分散，但是第二行对齐第一行最后一格控制不了。

使用grid fr均分单位控制。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.container {/** 1.grid: column、float、clear、vertical-align 属性失效* 2. grid-template-columns 属性来指定网格容器中所需的列数以及每列的宽度。* 3.grid-template-rows 属性来指定网格容器中每一行的高度。与 grid-template-columns 属性不同，它并没有指定网格容器的行数，而只用来设置每行的高度。这是因为每当网格项换行时，网格容器都会隐式创建一个新行4.column-gap 和 row-gap 属性来分隔列和行, 间距5.justify-items: space-around：在网格项之间设置均等宽度的空白间隙，其外边缘间隙大小为中间空白间隙宽度的一半6. align-items: stretch：将拉伸所有网格项目以填充其单元格的整个高度（默认值）*/display: grid;column-gap: 10px;grid-template-columns:0.75fr 0.25fr;justify-items: stretch;}/**/.item {background-color: #bfc;}.row1-inner {display: grid;column-gap: 10px;grid-template-columns:1fr 1fr 1fr;justify-items: stretch;row-gap: 10px;}.container2 {display: grid;margin-top: 5px;column-gap: 10px;/*row-gap: 10px;*/grid-template-columns:0.75fr 0.25fr;justify-items: stretch;}</style>
</head>
<body>
<div><div class="container"><!--  行1--><div class="row1-inner"><div class="item">1</div><div class="item">2</div><div class="item">3</div></div><div class="item">4</div></div><div class="container2"><!--  行2--><div class="item">201</div><div class="item">202</div></div></div></body>
</html>

 运行效果：

相关文章：

CSS 布局案例： 2行、多行每行格数不定，最后一列对齐

布局期望的效果如下&#xff1a; 第二行最后一格与第一行最后一格对齐。每行格数不定。自动拉伸填充整个宽度 实现&#xff1a; 一开始打算用display:flex&#xff0c; 自动分散&#xff0c;但是第二行对齐第一行最后一格控制不了。 使用grid fr均分单位控制。 <!DOCTYPE…...

编程日记 2023/10/11 5:57:35

数据结构--算法、数据结构的基本概念

&#x1f4d5;参考&#xff1a;王道 一、算法的基本概念 1.程序数据结构算法 2.算法的特性 &#xff08;1&#xff09;有穷性 执行有穷步之后结束&#xff0c;且每一步都可在有穷时间内完成。 &#xff08;2&#xff09;确定性 &#xff08;3&#xff09;可行性 可通过已经实…...

编程日记 2023/10/11 5:56:32

Edge浏览器下载文件被保存为 .crdownload 文件的问题小记

问题 近期使用Edge浏览器下载文件时&#xff0c;文件都被保存为 .crdownload 格式的文件了&#xff0c;不确定从哪个版本开始的。除非下载未完成导致文件不完整&#xff0c;否则不会被保存为 .crdownload 格式的文件&#xff1b;实际上文件已完成了下载&#xff0c;且手工修改…...

编程日记 2023/10/11 5:55:31

6-10 单链表分段逆转 分数 15

void K_Reverse( List L, int K ) { //此题已经默认size > K 因为当size < K时 反转后将不再符合链表的定义//求出表中元素个数int size 0;for (List cur L->Next; cur ! NULL; cur cur->Next)size; List prv, cur, next, first, head L;//共需要反转 si…...

编程日记 2023/10/11 5:54:30

【单片机】17-温度传感器DS18B20

1.DS18B20相关背景知识 1.温度传感器 &#xff08;1&#xff09;测温度的方式&#xff1a;物理&#xff08;汞柱&#xff0c;气压&#xff09;&#xff0c;电子&#xff08;金属电性能随温度变化&#xff09; &#xff08;2&#xff09;早期&#xff1a;热敏电阻&#xff08;模…...

编程日记 2023/10/11 5:53:28

力扣 -- 5. 最长回文子串

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:string longestPalindrome(string s) {int ns.size();vector<vector<bool>> dp(n,vector<bool>(n));//最长回文串的起始位置int start0;//最长回文串的长度int len0;for(int in-1;i>…...

编程日记 2023/10/11 5:50:25

SpringCloud源码探析（十）-Web消息推送

1.概述 消息推送在日常使用中的场景比较多&#xff0c;比如有人点赞了我的博客或者关注了我&#xff0c;这时我就会收到一条推送消息&#xff0c;以此来吸引我点击或者打开应用。消息推送的方式主要分为两种&#xff1a;web消息推送和移动端消息推送。它将所要发送的信息&…...

编程日记 2023/10/11 5:49:23

Vue、React和小程序中的组件通信：父传子和子传父

在前端开发中&#xff0c;组件化是一种常见的开发模式&#xff0c;它可以将复杂的用户界面拆分成多个可重用的组件。在Vue、React和小程序中&#xff0c;组件之间的数据和事件传递是非常关键的&#xff0c;其中父传子和子传父是常见的通信方式。本文将介绍在Vue、React和小程序…...

编程日记 2023/10/11 5:47:21

安卓玩机----展讯芯片机型解锁 读写分区工具 操作步骤解析

国内机型大都使用高通和MTK芯片。展讯芯片使用的较少。相对来说高通和mtk机型解锁以及读取分区工具较多。展讯的几乎没有。目前有大佬开发出了一款展讯芯片解锁 与读写分区工具.开源的tools 官方分享说明&#xff1a; 是一款专为 Windows 计算机设计的免费、用户友好的工具&am…...

编程日记 2023/10/11 5:46:20

微软放大招！Bing支持DALL-E3，免费AI绘画等你来体验！

最近 OpenAI 发布了DALL-E3模型&#xff0c;出图效果和Midjourney不相上下&#xff0c;不过要使用它有些门槛&#xff0c;必须是 ChatGPT Plus 账户&#xff0c;而且还要排队&#xff0c;怎么等都等不到&#xff0c;搞得大家都比较焦虑。 不过现在微软在Bing上也支持 DALL-E3 …...

编程日记 2023/10/11 5:45:19

tp5访问的时候必须加index.php,TP5配置隐藏入口index.php文件

PS&#xff1a;这里说的入口文件指的是public/index.php,配置文件就在这个目录下 可以去掉URL地址里面的入口文件index.php&#xff0c;但是需要额外配置WEB服务器的重写规则。 以Apache为例&#xff0c;需要在入口文件的同级添加.htaccess文件(官方默认自带了该文件)&#x…...

编程日记 2023/10/11 5:42:16

16k面试中的10个问题

你好&#xff0c;我是田哥 节前&#xff0c;有位朋友跟我反馈面试中一些问题&#xff0c;这位朋友的基本情况&#xff1a; 坐标&#xff1a;上海&#xff0c;年限&#xff1a;3年不到&#xff0c;期望薪资&#xff1b;16k 下面我们来看看具体问题&#xff1a; 01&#xff1a;请…...

编程日记 2023/10/11 5:41:15

STM32单片机入门学习（六）-光敏传感器控制LED

光敏传感器模块和LED接线 LED负极接B12,正极接VCC 光敏传感模块一DO端接B13,GND接GND&#xff0c;VCC接VCC,AO不接。 如图&#xff1a; 主程序代码&#xff1a;main.c #include "stm32f10x.h" #include "Delay.h" //delay函数所在头文件 #include …...

编程日记 2023/10/11 5:40:14

MFC 鼠标悬停提示框

MFC 鼠标悬停提示框 运行效果 在MFC窗口中添加一个控件 工具栏中拖拽List Box到MFC窗口给List Box添加变量 CListBox m_listbox 增加成员变量 CWnd* m_tip_parent_wnd; CToolTipCtrl m_tip;给m_listbox创建提示框 void create_tip_window(CWnd* tip_wnd, CToolTipCtrl* ti…...

编程日记 2023/10/11 5:39:12

大数据学习，涉及哪些技术？

学习大数据需要涉及多种技术和概念&#xff0c;因为大数据领域非常广泛&#xff0c;涵盖了数据的采集、存储、处理、分析和可视化等多个方面。以下是学习大数据时需要考虑的一些关键技术和概念&#xff1a; 1、数据采集和存储&#xff1a; 数据库管理系统&#xff08;DBMS&am…...

编程日记 2023/10/11 5:38:11

Clion中使用C/C++开发stm32程序

前言 从刚开始学习阶段&#xff0c;一直是用的keil5开发stm32程序&#xff0c;自从看到稚晖君推荐的CLion开发嵌入式程序后&#xff0c;这次尝试在CLion上开发stm32程序。 1、配置CLion用于STM32开发的环境 这里我就不详细写了&#xff0c;没必要重新写&#xff0c;网上教程很多…...

编程日记 2023/10/11 5:37:08

JavaScript Web APIs第五天笔记

Web APIs - 第5天笔记 目标&#xff1a; 能够利用JS操作浏览器,具备利用本地存储实现学生就业表的能力 BOM操作综合案例 js组成 JavaScript的组成 ECMAScript: 规定了js基础语法核心知识。比如&#xff1a;变量、分支语句、循环语句、对象等等 Web APIs : DOM 文档对象模型&…...

编程日记 2023/10/11 5:35:06

[ICCV-23] Paper List - 3D Generation-related

ICCV-23 paper list 目录 Oral Papers 3D from multi-view and sensors Generative AI Poster Papers 3D Generation (Neural generative models) 3D from a single image and shape-from-x 3D Editing Face and gestures Stylization Dataset Oral Papers 3D from …...

编程日记 2023/10/11 5:34:05

Transformer为什么如此有效 | 通用建模能力，并行

目录 1 更强更通用的建模能力 2 并行计算 3 大规模训练数据 4 多训练技巧的集成 Transformer是一种基于自注意力机制的网络&#xff0c;在最近一两年年可谓是大放异彩&#xff0c;我23年入坑CV的时候&#xff0c;我看到的CV工作似乎还没有一个不用到Transformer里的一些组…...

编程日记 2023/10/11 5:33:02

【初识Jmeter】【接口自动化】

jmeter的使用笔记1 Jmeter介绍与下载安装介绍安装配置配置与扩展组件 jmeter的使用基本功能元素登陆请求与提取cookie其他请求接口关联Cookie-响应成功聚合报告查看 Jmeter介绍与下载安装 介绍 jmeter是apache公司基于java开发的一款开源压力测试工具&#xff0c;体积小&…...

编程日记 2023/10/11 5:32:01

知识产权管理中的流程自动化：从人工操作到系统智能

企业知识产权部门日常工作中&#xff0c;最耗费时间的往往不是策略制定&#xff0c;而是重复性的事务处理&#xff1a;收到官方来文后手动解压、分类、重命名、上传到对应案件&#xff1b;收到审查意见后人工计算答复期限并设置提醒&#xff1b;案件状态变化后逐个更新Excel记录…...

编程新知 2026/5/22 13:57:24

RV1126B开发板驱动多路AHD摄像头：硬件连接、内核驱动与AI应用实战

1. 项目概述&#xff1a;RV1126B开发板与AHD摄像头的融合应用在嵌入式视觉和边缘计算项目中&#xff0c;将传统的模拟高清摄像头接入到高性能的AI计算平台上&#xff0c;是一个既常见又充满挑战的需求。我最近在基于瑞芯微RV1126B芯片的EASY-EAI Nano-TB开发板上&#xff0c;成…...

编程新知 2026/5/22 13:40:51

为什么你的DeepSeek推理延迟飙升300%？GPU显存碎片化诊断与TensorRT加速实录

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;DeepSeek推理延迟飙升300%的根因定位 在一次线上A/B测试中&#xff0c;DeepSeek-R1-7B模型的P99推理延迟从平均320ms骤升至1280ms&#xff0c;增幅达300%。该异常首先被PrometheusGrafana告警链捕获&#xff…...

编程新知 2026/5/22 13:30:40

核心主题：IT人如何通过系统性技能提升实现高效编码

核心主题&#xff1a;IT人如何通过系统性技能提升实现高效编码 技术能力维度 编程语言深度掌握&#xff08;如Python、Java等主流语言特性与底层原理&#xff09;算法与数据结构实战应用&#xff08;LeetCode高频题型与工程化落地&#xff09;设计模式与架构思维&#xff08;…...

编程新知 2026/5/22 13:07:00

从SysTick中断到任务就绪：深入追踪FreeRTOS一次Tick如何触发PendSV切换

从SysTick中断到任务就绪&#xff1a;深入追踪FreeRTOS一次Tick如何触发PendSV切换 在嵌入式实时操作系统的世界里&#xff0c;任务切换的精确性和可靠性直接决定了系统的实时性能。对于使用FreeRTOS的开发者而言&#xff0c;理解从SysTick中断到最终任务切换的完整链条&#x…...

编程新知 2026/5/22 12:03:16

抖音批量下载助手：高效构建个人视频素材库的完整解决方案

抖音批量下载助手&#xff1a;高效构建个人视频素材库的完整解决方案 【免费下载链接】douyinhelper 抖音批量下载助手 项目地址: https://gitcode.com/gh_mirrors/do/douyinhelper 在内容创作成为主流表达方式的今天&#xff0c;视频素材的获取和管理成为创作者面临的核…...

编程新知 2026/5/22 11:28:28

别再复制粘贴了！Element Plus 表格组件与SpringBoot后端数据联调实战

别再复制粘贴了&#xff01;Element Plus 表格组件与SpringBoot后端数据联调实战 在前后端分离的开发模式中&#xff0c;前端表格组件与后端数据的动态联调是每个开发者必须掌握的技能。Element Plus作为Vue3生态中最受欢迎的UI组件库之一&#xff0c;其表格组件(el-table)的灵…...

编程新知 2026/5/22 11:16:16

如何突破文档下载壁垒：kill-doc自动化工具实战指南

如何突破文档下载壁垒&#xff1a;kill-doc自动化工具实战指南 【免费下载链接】kill-doc 看到经常有小伙伴们需要下载一些免费文档&#xff0c;但是相关网站浏览体验不好各种广告&#xff0c;各种登录验证&#xff0c;需要很多步骤才能下载文档&#xff0c;该脚本就是为了解决…...

编程新知 2026/5/22 11:08:05

MulimgViewer终极指南：如何用一个界面管理多张图片，告别繁琐切换

MulimgViewer终极指南&#xff1a;如何用一个界面管理多张图片&#xff0c;告别繁琐切换 【免费下载链接】MulimgViewer MulimgViewer is a multi-image viewer that can open multiple images in one interface, which is convenient for image comparison and image stitchin…...

编程新知 2026/5/22 10:28:02

DeepSpeech终极指南：离线语音识别的深度学习引擎完整实践

DeepSpeech终极指南&#xff1a;离线语音识别的深度学习引擎完整实践 【免费下载链接】DeepSpeech DeepSpeech is an open source embedded (offline, on-device) speech-to-text engine which can run in real time on devices ranging from a Raspberry Pi 4 to high power G…...

编程新知 2026/5/22 10:15:19