css实现瀑瀑流-图片文字实现自适应效果

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<style>
.waterfall{column-count: 3;column-gap: 0;
}.item{box-sizing: border-box;break-inside: avoid;padding: 10px;
}
.item-content{display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 10px;height: auto;font-size: 20px;color: #686868;box-sizing: border-box;border: 1px solid #ccc;
}/* 图片自适应 */
/* img {width: auto !important;height: auto !important;width: 100% !important;max-height: 100% !important;
} */
</style>
<body><div class="waterfall"><div class="item"><div class="item-content">三月到大理赏樱花不远不近<img src="https://img1.baidu.com/it/u=3293231005,2758635617&fm=26&fmt=auto" alt="" style="width: 200px;height: 100px;"></div></div><div class="item"><div class="item-content">三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆，在部队那些日子被遗忘的花儿春光<img src="https://img2.baidu.com/it/u=3230608530,902431355&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style="width: 200px;height: 100px;"></div></div><div class="item"><div class="item-content">三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆<img src="https://img1.baidu.com/it/u=1265359652,2602599314&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=708" alt="" style="width: 100px;height: 100px;"></div></div><div class="item"><div class="item-content">三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆<img src="https://img2.baidu.com/it/u=672776529,4061746392&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889" alt="" style="width: 400px;height: 100px;"></div></div><div class="item"><div class="item-content">三月到大理赏樱三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆花不远不近，才是最好的距离余生，请带上自己的阳光回忆<img src="https://img2.baidu.com/it/u=121521759,2505802225&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" style="width: 200px;height: 100px;"></div>
</div>
<div class="item"><div class="item-content">三月到大理赏樱花不远不近，才是最好的距离三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆余生，请带上自己的阳光回忆<img src="https://img1.baidu.com/it/u=2414851883,3281230339&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style="width: 200px;height: 300px;"></div>
</div>
<div class="item"><div class="item-content">三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆三月到大理赏樱花不远不近，才是最好的距离余生，请带上自己的阳光回忆<img src="https://img2.baidu.com/it/u=768172750,521301536&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" style="width: 200px;height: 250px;"></div>
</div></div>
</body>
</html>

效果图

css实现瀑瀑流-图片文字实现自适应效果相关推荐

图片文字介绍滑动效果代码介绍
代码链接结果展示代码 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
图片文字制作视差效果
图片文字制作视差效果教程地址:原文地址(YouTube) B站教程:原文转载(bilibili) 两个视频的内容相同,第二个为转载效果图代码区 html <section><p ...
python 百度ocr安装_Python利用百度文字识别(OCR)服务实现图片文字提取，准确率超高...
最近和朋友聊天,聊到一个充满使命感但又略显心酸的话题--下班回家在网上给小朋友抄题...那么问题来了,除了大家所知的QQ文字识别功能之外,还有哪些方式可以做到文字识别呢. 作为一名热心的Python小 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
利用vertical-align实现图片文字垂直居中对齐（HTML、CSS）
利用vertical-align实现图片文字垂直居中对齐(HTML.CSS) <!DOCTYPE html> <html lang="en"><hea ...
CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
Java添加图片的悬浮提示,DIV+CSS鼠标经过悬停在图片上方显示图片文字
原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景为半透明.可以使用纯DIV+CSS实现鼠标悬停图片上显示文字内容. 使用div css实现鼠标悬停图片上方时显示文字内容原理: 首先我们 ...
div图片背景虚化不影响图片上的文字_HTML+CSS入门如何实现背景图片虚化效果
本篇教程介绍了HTML+CSS入门如何实现背景图片虚化效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 需求:一个div设置了background: url,现在需要 ...
css图片跟文字居中,css 图片文字垂直居中
先来看张图片相信很多css新手遇到过这种问题,就是当图片和文本显示在一行的时候,效果很奇葩,文字和图片没法对齐, 这时我们需要做的是: 1,先给块级元素设置 display: inline-bloc ...

css实现瀑瀑流-图片文字实现自适应效果

css实现瀑瀑流-图片文字实现自适应效果相关推荐

最新文章

热门文章