保定网站制作网页,北京网站优化体验,哈尔滨暂停现场业务,宣传册内容排版column 多行布局实现瀑布流 1.column 实现瀑布流主要依赖两个属性。 2.column-count 属性#xff0c;是控制屏幕分为多少列。 3.column-gap 属性#xff0c;是控制列与列之间的距离。 !DOCTYPE html
html langen
headmeta charset是控制屏幕分为多少列。 3.column-gap 属性是控制列与列之间的距离。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title瀑布流布局-column/titlestyle.box {margin: 10px;column-count: 3;column-gap: 10px;}.item {margin-bottom: 10px;}.item img{width: 100%;height:100%;}/style
/head
bodydiv classboxdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //div/div
/body
/html flex 弹性布局实现瀑布流 flex 实现瀑布流需要将最外层元素设置为 display: flex使用弹性布局 flex-flow:column wrap 使其纵向排列并且换行换行 设置 height: 100vh 填充屏幕的高度也可以设置为单位为 px 的高度来容纳子元素。 每一列的宽度可用 calc 函数来设置即 width: calc(100%/3 - 20px)。分成等宽的 3 列减掉左右两遍的 margin 距离。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title瀑布流布局-flex/titlestyle.box {display: flex; flex-flow: column wrap;height: 100vh;}.item {margin: 10px;width: calc(100%/3 - 20px);}.item img{width: 100%;height:100%;}/style
/head
bodydiv classboxdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //divdiv classitemimg src./imgs/2.jpg alt2 //divdiv classitemimg src./imgs/3.jpg alt3 //divdiv classitemimg src./imgs/1.jpg alt1 //div/div
/body
/html
