css实现元素纵向排列自动换列

news2024/12/26 21:25:29

 块级元素在容器类纵向排列,当达到最大高度后自动换到下一列

<div id="main-div">
    <div class="item">1 一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容一条内容</div>
    <div class="item">2 CSS-通过伪类画弧形背CSS-通过伪类画弧形背通过伪类画弧形背CSS-通过伪类画弧形背通过伪类画弧形背CSS-通过伪类画弧形背</div>
    <div class="item">3 非常感谢用户分享这篇博客,解决了我在下载VSCode时遇到的</div>
    <div class="item">4 非常感谢作者分享的这篇博客,介绍了如何使用CSS实现平</div>
    <div class="item">5 CSS使用布局自适应两列</div>
    <div class="item">6 JS 工具函数,生成随机颜色值和固定长度的字符串</div>
    <div class="item">7 使用Flex做两行或两列布局</div>
    <div class="item">8 除了你之外没有人除了你之外没有人除了你之外没有人除了你之外没有人除了你之外没有人除了你之外没有人除了你之外没有人除了你之外没有人</div>
  </div>

div {
  border: solid 1px #000;
}
#main-div {
  width: 600px;
  height: 500px;
  writing-mode: vertical-lr;
}
.item {
  padding: 40px;
  width: 200px;
  display: inline-block;
  background-color: #999;
  writing-mode: horizontal-tb;
}

 

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

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

相关文章

王道考研计算机网络第四·章知识点汇总

4.1.1网络层功能概述 4.1.2 SDN基本概念 4.2.1 路由算法和路由协议概述 4.3.1 IP数据报格式 4.3.2 IP数据报分片 4.3.3 IPv4地址 4.3.4 网络地址转换NAT 4.3.5 子网划分和子网掩码 不同子网掩码得到的网络地址可能相同 网络号为B类地址&#xff0c;16位网络号&#xff1b;6位子…

从四个角度全面认识 ChatGPT

传统语言模型是什么样的&#xff1f;ChatGPT 涌现出了哪些新能力&#xff1f;这些能力都是怎么做到的&#xff1f;在 ChatGPT 大模型时代&#xff0c;我们应该怎么做&#xff1f; 当下最引人注目的语言模型 ChatGPT 如火如荼&#xff0c;主要还是因为其能力远远超越了传统模型。…

js中堆的操作和案例!

堆 什么是堆&#xff1f; 堆是一种特殊的完全二叉树。完全二叉树的含义就是每层节点都完全填满&#xff0c;除了最后一层外只允许最右边缺少若干个节点。在 JavaScript 中通常用数组表示堆&#xff08;按照广度优先遍历顺序&#xff09;。 最大堆 最小堆 特性 所有的节…

Python入门教程+项目实战-14.4节-lambda表达式

目录 14.4.1 理解匿名函数 14.4.2 lambda表达式 14.4.3 lambda表达式与具名函数 14.4.4 知识要点 14.4.5 系统学习python 14.4.1 理解匿名函数 匿名函数&#xff0c;从其字面意思来进行理解。所谓的匿名即不具名&#xff0c;没有名称。匿名函数&#xff0c;也就是没有函…

chatgpt赋能python:Python编程语言-让生活更有趣

Python编程语言-让生活更有趣 作为一名10年的Python工程师&#xff0c;我可以毫不犹豫地说&#xff0c;Python是一种编辑器最有趣的编程语言之一。作为Python的忠实拥护者和使用者&#xff0c;我深信Python可以让生活变得更轻松&#xff0c;更有趣。 Python简介 Python是一种…

std::function的讲解与实战

一、C语言中的函数指针 先看一个函数指针的例子 test_fun.cpp&#xff1a; #include<iostream>//定义函数指针 typedef int (*func)();using namespace std;int test1(){cout<<"hello, test1"<<endl;return 0; }int test2(){cout<<"h…

第三十五章Java面向对象概念及封装、继承、多态三种特性详解

面向对象简称 OO&#xff08;Object Oriented&#xff09;&#xff0c;20 世纪 80 年代以后&#xff0c;有了面向对象分析&#xff08;OOA&#xff09;、 面向对象设计&#xff08;OOD&#xff09;、面向对象程序设计&#xff08;OOP&#xff09;等新的系统开发方式模型的研究。…

ch10_2控制单元的_微程序设计

1. 微程序设计 1.1 微程序设计思想 使用微程序的设计方式&#xff0c;实现计算机系统的控制器&#xff1b; 微程序的设计&#xff0c;是方便指令集的修改和扩展&#xff1b; 每个节拍发出的控制命令&#xff0c; 实际上就是一个电信号&#xff0c;或者是几个电信号&#xf…

堆的向下调整算法,堆排,TopK问题

文章目录 堆的向下调整算法堆的删除&#xff1a;堆排序向上调整建堆的时间复杂度向下调整建堆的时间复杂度为&#xff1a;TopK问题 堆的向下调整算法 我们在这里都已小堆为例&#xff1a; 在这里我们有一个数组 int array[] {27,15,19,18,28,34,65,49,25,37}; 我们通过把根节…

Oracle VM VirtualBox添加磁盘

文章目录 1、Oracle VM VirtualBox添加磁盘 1、Oracle VM VirtualBox添加磁盘 1.关闭正在启动的Oracle VM VirtualBox 2、选择存储 3、点击最右边 4、选择创建 直接下一步&#xff1a; 直接下一步&#xff1a; 调整需要的大小–创建即可: 此时此刻磁盘加载成功&#xff0…

【综合企业管理平台】网络杂谈(10)之什么是Unicenter TNG?

涉及知识点 什么是 Unicenter TNG&#xff0c;Unicenter TNG的基本管理功能&#xff0c;Unicenter TNG Discovery &#xff0c;深入了解Unicenter TNG技术&#xff0c;综合企业管理平台 Unicenter TNG 。 原创于&#xff1a;CSDN博主-《拄杖盲学轻声码》&#xff0c;更多内容可…

8.串行通信

1.通信接口相关知识&#xff1a; &#xff08;1&#xff09;处理器与外界设备通信的两种方式&#xff1a; 1&#xff09;并行通信&#xff1a; 传输原理&#xff1a;数据各个位同时传输&#xff1b; 优点&#xff1a;速度快&#xff1b; 缺点&#xff1a;占用引脚资源多&…

vue+leaflet笔记之地图网格

vueleaflet笔记之地图网格 本文介绍了Web端使用Leaflet开发库显示地图经纬网和标准图幅网格的方法 (底图来源:天地图)&#xff0c; 地图格网是由间隔均匀的横向线和纵向线组成的网络&#xff0c;用于在地图上识别各个位置。 经纬网通过在地图上描绘纬度和经度格网&#xff0c;…

40.Docker

目录 一、Docker。 &#xff08;1&#xff09;认识Docker。 &#xff08;1.1&#xff09;什么是Docker。 &#xff08;1.2&#xff09;Docker和虚拟机的区别。 &#xff08;2&#xff09;镜像、容器、DockerHub、Docker架构。 &#xff08;3&#xff09;安装Docker&#…

VS+QT+VTK三维曲面网格点选切割

程序示例精选 VSQTVTK三维曲面网格点选切割 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对<<VSQTVTK三维曲面网格点选切割>>编写代码&#xff0c;代码整洁&#xff0c;规则&…

DAMA学习笔记1:概念模型-逻辑模型篇

A实体的某个字段指向 B实体的主键, 则称A实体的那个字段为该实体的外键, 一个表里可以有多个外键&#xff0c;也可以没有外键&#xff1b; 被指向的实体称为主实体(主表)&#xff0c;也叫父实体(父表)&#xff0c;负责指向的实体称为从实体(从表)&#xff0c;也叫子实体(子表)…

记录好项目D18

记录好项目 你好呀&#xff0c;这里是我专门记录一下从某些地方收集起来的项目&#xff0c;对项目修改&#xff0c;进行添砖加瓦&#xff0c;变成自己的闪亮项目。修修补补也可以成为毕设哦 本次的项目是个网上商城 一、系统介绍 前台商城系统&#xff1a;包含首页登录、商…

动态规划——下降路径最小和

题目链接 leetcode在线oj题——下降路径最小和 题目描述 给你一个 n x n 的 方形 整数数组 matrix &#xff0c;请你找出并返回通过 matrix 的下降路径 的 最小和 。 下降路径 可以从第一行中的任何元素开始&#xff0c;并从每一行中选择一个元素。在下一行选择的元素和当前…

mmpose冻结参数训练,如何添加find_unused_parameters参数

mmpose冻结参数训练&#xff0c;如何添加find_unused_parameters参数 在backbone下方添加 frozen_stages7即可冻结前7层的参数。要注意对于多卡训练来说还需要添加 find_unused_parameters True。看图片中代码的位置。

回忆雅礼朱哥二三事

少年时代的记忆是最模糊的&#xff0c;却也是最深刻的。一些瞬间在大脑里几十年&#xff0c;那一定是你曾经心动和在乎过的感受。年少求学期间&#xff0c;因对数学的痴迷&#xff0c;和数学有关的一切我都记忆犹新&#xff1a;记得一个人趴在地上解题一下午的投入&#xff0c;…