域名查询权威网站,做销售找客户渠道,网站开发 模块化,dede 电商网站模板上效果 知识理解
column-count: 4; column-gap: 15px;实现固定四行瀑布流布局
columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整#xff0c;尽可能一行多个200px宽度的列数
!DOCTYPE html
html langenheadme…上效果 知识理解
column-count: 4; column-gap: 15px;实现固定四行瀑布流布局
columns: 200px auto;column-gap: 15px;由浏览器根据容器的宽度自动调整尽可能一行多个200px宽度的列数
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title瀑布流布局示例/titlestyle.container {/* 设置列间距 */column-gap: 15px;/* column-count: 4; 固定列数 *//* 设置列宽和列数列的数量由浏览器根据容器的宽度自动调整 *//* 设置列数 */columns: 300px auto;/* 禁用文本选择 */user-select: none;}.item {/* break-inside 用于控制元素是否可以在页面、列或区域的边界处被分割 *//* 当设置为 avoid 时浏览器会尝试避免将元素的内容分割到不同的页面、列或区域中。这意味着整个元素内容尽可能保持在同一页面、列或区域内 */break-inside: avoid;/* Safari 浏览器 */-webkit-column-break-inside: avoid;/*老版本浏览器 用于控制元素是否可以在页面、列或区域的边界处被分割*/page-break-inside: avoid;margin-bottom: 15px;}.item img {width: 100%;border-radius: 8px;display: block;}/style
/headbodydiv idappdiv classcontainerdiv classitem v-for(item, index) in list :keyindeximg :srchttps://picsum.photos/${item} alt随机图片/div/div/div!-- 引入Vue库 --script srchttps://cdn.jsdelivr.net/npm/vue2/scriptscriptconst appnew Vue({el: #app,data () {return {list: [290/320,190/370,290/330,250/410,230/380,260/370,210/430,290/310,430/310,390/440,430/310,390/440,390/440,]};}});/script
/body/html
