css div上下左右排序

news2024/11/20 10:22:32 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>div上下左右排序</title>
</head>
<style>
  .div-box {
      display: grid;
      grid-auto-flow: column; /* 排序方式： column-先列后行， row-先行后列 */
      grid-template-columns: repeat(4, 207px); /* 设计列宽 */
      grid-template-rows:  repeat(2,138px); /* 设计行高 */
      /* grid-template-rows:  repeat(2,auto); */
      grid-row-gap: 24px; /* 行间距 */
      grid-column-gap: 177px;  /* 列间距 */
  }
  .div-box2 {
      display: grid;
      grid-auto-flow: row;
      grid-template-columns: repeat(4, 207px);
      grid-template-rows:  repeat(4,138px);
      /* grid-template-rows:  repeat(2,auto); */
      grid-row-gap: 24px;
      grid-column-gap: 177px;
  }
  .div-item {
      background-color: #0ec885;
      line-height: 138px;
      text-align: center;
  }
</style>
<body>
<h2>排列：先列后行</h2>
<div class="div-box">
  <div class="div-item">1</div>
  <div class="div-item">2</div>
  <div class="div-item">3</div>
  <div class="div-item">4</div>
  <div class="div-item">5</div>
  <div class="div-item">6</div>
</div>
<h2>排列：先行后列</h2>
<div class="div-box2">
  <div class="div-item">1</div>
  <div class="div-item">2</div>
  <div class="div-item">3</div>
  <div class="div-item">4</div>
  <div class="div-item">5</div>
  <div class="div-item">6</div>
  <div class="div-item">7</div>
  <div class="div-item">8</div>
</div>
</body>
</html>

在这里插入图片描述

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

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

相关文章

编译链接再认识+gdb认识+makefile了解+缓冲区的理解+进度条的实现

编译链接再认识+gdb认识+makefile了解+缓冲区的理解+进度条的实现

索引 一. 编译链接再认识1.预处理2.编译3.汇编4.链接1.静态链接2.动态链接 二.gdb三.makefile/make四.缓存区的理解五. 进度条的实现 一. 编译链接再认识 主要针对gcc展开 一个文件从源文件编译成可执行文件大致要经历四个步骤 预处理&#xff08;进行宏替换&#xff09;编译…
阅读更多...
office@word官方文档查看@审阅@批注@修订

office@word官方文档查看@审阅@批注@修订

文章目录 office官方文档microsoft office 文档教程语言切换文档官网word官方培训资源找到合适的文档 word共享共同创作的相关支持word审阅重点修订批注审阅窗格右侧边窗格修订选项区分标记和修订 officeword官方文档查看审阅批注修订 office官方文档 microsoft office 文档教…
阅读更多...
国家信息安全水平考试中NISP三级（专项）网络安全证书介绍

国家信息安全水平考试中NISP三级（专项）网络安全证书介绍

国家信息安全水平考试中NISP三级&#xff08;专项&#xff09;网络安全证书介绍 ​1、什么是NISP? 国家信息安全水平考试&#xff08;National Information Security Test Program&#xff0c;简称NISP&#xff09;&#xff0c;是由中国信息安全测评中心实施培养国家网络空间…
阅读更多...
c++ 11标准模板（STL） std::vector (六）

c++ 11标准模板（STL） std::vector (六）

定义于头文件 <vector> template< class T, class Allocator std::allocator<T> > class vector;(1)namespace pmr { template <class T> using vector std::vector<T, std::pmr::polymorphic_allocator<T>>; }(2)(C17…
阅读更多...
I/O常用扩展方法与芯片

I/O常用扩展方法与芯片

主要有四种I/O扩展方法&#xff1a; (1)并行总线扩展的方法 (2)串行口扩展方法 (3)I/O端口模拟串行方法 (4)通过单片机内I/O的扩展方法 IO口扩展可以通过以下芯片来实现&#xff1a; 1、并行扩展芯片&#xff0c;比如8255 &#xff0c;8155等。 2、锁存器或缓冲器来扩展&#x…
阅读更多...
README.md编写

README.md编写

一、摘要 项目一般会有个描述文件&#xff0c;对于项目的代码来讲&#xff0c;这个描述就是README.md文件&#xff0c;可以描述各模块功能、目录结构等。该文件可以方便让人快速了解项目的代码结构和功能。当然&#xff0c;若要深层次的了解项目&#xff0c;就得看项目总体的需…
阅读更多...
Postman(接口测试工具)使用教程

Postman(接口测试工具)使用教程

目录 Postman(接口测试工具) Postman 介绍 Postman 相关资源 Postman 安装 具体安装步骤 ● 安装 Postman 快速入门 快速入门-实现步骤 其它说明 Postman(接口测试工具) Postman 介绍 1. Postman 是一款功能超级强大的用于发送 HTTP 请求的 测试工具 2. 做 WEB 页面开…
阅读更多...
（MAX5048BAUT+T）ASEMI代理美信MAX5048BAUT+T车规级芯片

（MAX5048BAUT+T）ASEMI代理美信MAX5048BAUT+T车规级芯片

编辑-Z MAX5048BAUTT特征&#xff1a; 型号&#xff1a;MAX5048BAUTT 可控上升和下降时间的独立源和汇输出 4V至12.6V单电源 7.6A/1.3A峰值吸收/源极驱动电流 0.23Ω 开路漏极N沟道吸收输出 2.Ω 漏极开路P通道源极输出 12ns&#xff08;典型&#xff09;传播延迟 反相…
阅读更多...
Mybatis方式完成CRUD操作

Mybatis方式完成CRUD操作

Mybatis方式完成CRUD操作 文章目录 Mybatis方式完成CRUD操作1、java以Mybatis方式操作DB1.1、配置数据源-创建 resources/mybatis-config.xml1.2、创建java bean-Monster1.3、配置Mapper接口声明方法1.4、配置xxMapper&#xff0c;完成SQL配置,实现CRUD操作1.5、Test测试 2、需…
阅读更多...
AI生成天空盒！泰裤辣！

AI生成天空盒！泰裤辣！

我经常做一些奇奇怪怪的梦&#xff0c;醒来的时候特别想把这些NB的场景给画下来分享给别人。 我尝试过AI绘画&#xff0c;但是还没达到我想要的那种沉浸的效果。如果能通过我的描述生成3D场景就好了。 直到我发现了它&#xff01; 先来欣赏一下它的杰作&#xff1a; 这个工具通…
阅读更多...
微信公众号扫码登录（一）—— 获取微信公众号二维码

微信公众号扫码登录（一）—— 获取微信公众号二维码

引言 这几天在研究微信登录&#xff0c;今天解决了获取微信二维码问题&#xff1b;在这里总结一下 关于微信登录想说的话 第一次接触微信登录&#xff0c;开始就弄混了登录方式&#xff1b;简单来说&#xff0c;微信扫码登录分为两种&#xff0c;一种是微信公众平台&#xf…
阅读更多...
SAP 从入门到放弃系列之工作中心（workcenter）

SAP 从入门到放弃系列之工作中心（workcenter）

目录 概念 数据收集 主要配置点&#xff1a; 工作中心类别 工作中心字段选择 工作中心公式 标准值码 工作中心位置 工序控制码 概念 工作中心是为制造过程增加价值的一台机器或一组机器、一个人或一组人&#xff0c;或一组人和机器。 数据收集 在 实施项目期间&#x…
阅读更多...
汉诺塔问题（解出来了带你看洛丽塔）

汉诺塔问题（解出来了带你看洛丽塔）

&#x1f929;本文作者&#xff1a;大家好&#xff0c;我是paperjie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 &#x1f970;内容专栏&#xff1a;这里是《算法详解》&#xff0c;笔者用重金(时间和精力)打造&#xff0c;将算法知识一网打尽&#xff0c;希望可以…
阅读更多...
[230508]托福听力真题TPO66｜词汇总结｜ 精听｜19:30～20:10 20:50~23:00 8:30～9:40

[230508]托福听力真题TPO66｜词汇总结｜ 精听｜19:30～20:10 20:50~23:00 8:30～9:40

TPO66 L1&#xff1a; 3/6 TPO66 L2&#xff1a; TPO66 L3&#xff1a; 目录 TPO66 C1 一、要点 二、文本 三、文本注释 四、复听笔记 TPO66 C2 一、要点 二、文本 三、文本注释 四、复听笔记 TPO66 L1 重点词汇 TPO66 L2 重点词汇 TPO66 L3 重点词汇 TPO66 C1 一、要点 …
阅读更多...
大家都去荷兰注册公司到底是为了什么？

大家都去荷兰注册公司到底是为了什么？

荷兰位于欧洲大陆西北部&#xff0c;北濒北海&#xff0c;与德国和比利时接壤。国土总面积为41528平方公里&#xff0c; 2020年2月人口达1741万人。荷兰是中国企业海外投资的重要目的地国之一。目前&#xff0c;中国是荷兰至二大外资项目来源国。据荷方统计&#xff0c;目前&am…
阅读更多...
用 ChatGPT 尝试 JavaScript 交互式学习体验，有用但不完美

用 ChatGPT 尝试 JavaScript 交互式学习体验，有用但不完美

很好&#xff0c;但还不能取代专家导师&#xff0c;有时还会犯错&#xff01; ChatGPT 教小狗编程&#xff08; Midjourney 创作&#xff09; GPT-4刚刚发布&#xff0c;相较于GPT-3.5&#xff0c;它有显著的增强功能。其中之一是它在更长时间的交互和更大的提示下&#xff0c;…
阅读更多...
Java程序设计入门教程--数组

Java程序设计入门教程--数组

目录 一、一维数组创建 1. 定义数组 &#xff08;1&#xff09;声明 &#xff08;2&#xff09;分配数组内存空间 2. 数组初始化 &#xff08;1&#xff09;静态初始化 &#xff08;2&#xff09;动态初始化 3. 一维数组的拷贝 &#xff08;1&#xff09;数组元素的拷…
阅读更多...
家用洗地机哪种好？怎么选购家用洗地机

家用洗地机哪种好？怎么选购家用洗地机

在这个高度关注环境、健康和安全的时代&#xff0c;洗地机已成为多种设施不可或缺的清洁工具。它不仅可以提高清洁速度和质量&#xff0c;还可以协助您提高生产效率和管理流程。洗地机的优点在于它易于使用&#xff0c;具有多种高效能力和灵活性&#xff0c;是一个为现代清洁服…
阅读更多...
（C语言版）力扣（LeetCode）+牛客网（nowcoder）链表相关面试题OJ题解析

（C语言版）力扣（LeetCode）+牛客网（nowcoder）链表相关面试题OJ题解析

链表面试题 203. 移除链表元素题目解法一&#xff1a;递归解法二&#xff1a;迭代 206. 反转链表题目解法一&#xff1a;递归解法二&#xff1a;迭代 876. 链表的中间结点题目解法一&#xff1a;快慢指针法解法二&#xff1a;单指针法 链表中倒数第k个结点题目解法 21. 合并两个…
阅读更多...
22.碳交易机制下考虑需求响应的综合能源系统优化运行

22.碳交易机制下考虑需求响应的综合能源系统优化运行

说明书 MATLAB代码&#xff1a;碳交易机制下考虑需求响应的综合能源系统优化运行 注意&#xff1a;另外还有含义柔性负荷、蓄冷式空调、共享储能以及碳捕集的综合能源系统优化运行代码&#xff0c;欢迎咨询 关键词&#xff1a;需求响应 碳交易机制 日前优化调度 综合能源系统…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023