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

最新推荐文章于 2024-05-24 17:57:30 发布

bangleilei

最新推荐文章于 2024-05-24 17:57:30 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/banglei123/article/details/131479640

该文讨论了CSS在块级元素排列中的应用，如通过设置writing-mode实现垂直排列和自适应布局。同时提到了Flex布局在创建两行或两列布局中的作用，以及JavaScript在生成随机颜色和固定长度字符串的实用函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<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;
}