首页 > 其他分享 >css 实现瀑布流布局

css 实现瀑布流布局

时间:2025-01-20 22:13:56浏览次数:1  
标签:box column 布局 瀑布 10px border css

效果:

 

 

代码:

<div class="container">
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:20px"></div>
  <div class="item" style="height:30px"></div>
  <div class="item" style="height:60px"></div>
  <div class="item" style="height:40px"></div>
  <div class="item" style="height:50px"></div>
  <div class="item" style="height:70px"></div>
</div>

<style type="text/css">
.container {
  column-count: 5;
  column-gap: 10px;
}

.item {
  break-inside: avoid;
  box-sizing: border-box;
  padding: 10px;
  border:1px solid #aaa;
  margin-bottom: 10px;
}

</style>

 

标签:box,column,布局,瀑布,10px,border,css
From: https://www.cnblogs.com/jsper/p/18682575

相关文章

  • 怎样用纯CSS实现禁止鼠标点击事件?
    在纯CSS中,没有直接的方法来禁止鼠标点击事件。CSS主要用于描述文档的样式,而不是控制其行为。点击事件等交互行为通常是通过JavaScript来处理的。然而,你可以使用CSS的pointer-events属性来阻止鼠标事件触发元素的默认行为。将pointer-events设置为none将使元素不再响应鼠标事件,例......
  • 实现一个上下固定,中间自动填满的布局
    要实现一个上下固定,中间自动填满的布局,你可以使用CSS的Flexbox或者Grid布局。下面我将给出两种方法的示例。方法一:使用FlexboxHTML:<divclass="container"><divclass="header">Header</div><divclass="main-content">MainContent</div><div......
  • 请用css写一个扫码的加载动画图
    创建一个简单的扫码加载动画可以使用CSS的关键帧动画。以下是一个简单的例子,模拟了一个线条从左到右的扫描效果:HTML:<divclass="scanner"><divclass="scan-line"></div></div>CSS:.scanner{width:200px;height:100px;border:1pxsolid#000;......
  • 举例说明css有哪些简写的属性和属性值?
    CSS(层叠样式表)中包含了大量的属性和属性值,用于定义HTML元素的样式。为了简化代码和提高效率,CSS提供了一些简写的属性和属性值。以下是一些常见的CSS简写属性和属性值的例子:1.颜色值缩写16进制颜色:CSS中常用的颜色表示方法是16进制,可以缩写为3位或6位。例如,#000000可以缩写为#0......
  • CSS 实体
    如果希望在HTML中使用CSS显示以下任何字符,您可以使用下表中的CSS实体。实例<style>h1:after{content:'\00A7';}</style>所有<h1>元素都将在结尾显示该字符:<!DOCTYPEhtml><html><style>h1:after{content:'\00A7';}</style......
  • 你是怎么设计css sprites(精灵图)的?有哪些技巧?
    在设计CSSSprites(精灵图)时,我通常会遵循以下步骤和技巧:一、设计步骤:确定需求:首先,明确哪些小图标或背景图像需要合并到精灵图中。这通常包括网站中频繁使用的图标,如导航按钮、社交媒体图标、工具提示等。创建精灵图:使用图像编辑软件(如Photoshop、GIMP等)将所有需要的小图标合并......
  • px、em 和 rem 的区别:深入理解 CSS 中的单位
    文章目录前言一、`px`-像素(Pixel)二、`em`-相对父元素字体大小(Ems)三、`rem`-相对于根元素字体大小(RootEms)四、综合比较结语前言在CSS中,px、em和rem是三种用于定义尺寸(如宽度、高度、边距、填充等)的长度单位。它们各自有不同的特性,适用于不同的场景......
  • 你知道css的预处理器和后处理器都有哪些吗?它们有什么区别呢?
    CSS的预处理器和后处理器在前端开发中扮演着重要的角色,它们能够增强CSS的功能,提高开发效率。以下是关于CSS预处理器和后处理器的详细介绍:一、CSS预处理器CSS预处理器定义了一种新的语言,这种语言为CSS增加了编程的特性,如变量、嵌套规则、混合(mixin)等。开发者可以使用这种语言进......
  • css的linear-gradient有什么作用呢?
    linear-gradient()是CSS中的一个函数,用于创建一个线性渐变的背景图像。这个函数可以让你在两个或更多的颜色之间创建一个平滑的过渡效果。linear-gradient()函数的基本语法如下:linear-gradient(angleordirection,color-stop1,color-stop2,...);angle:定义渐变线的角......
  • 我的CSS学习
    CSS定义用来描述HTML文档的呈现(美化内容)书写位置title标签下方添加style双标签,style标签里面书写CSS代码。<title>css初体验</title><style>/*选择器{}*/css属性*/color:red;</style><p>体验csS</p>书写规则 选择器{属性名:属性值;}CSS引入......