摘要:现成的布局方式布局,具有等分布局的能力,如图问题但是底部我们并不想如此等分,我们更希望可以同上一排对齐方案其实很简单,我们只要在后面加入一些等宽但是占高为等隐藏元素即可轻松实现。
效果先行 需求
在大量“不定宽”元素并排的布局模式下,上图是我们想要的最佳布局
但是FlexBox布局虽然枪弹但并不能完全呈现以上布局,于是我们需要结合FlexBox作下小的改动即可实现。
Flex布局,具有等分布局的能力,如图
但是底部我们并不想如此等分,我们更希望可以同上一排对齐
方案其实很简单,我们只要在后面加入一些等宽但是占高为0等隐藏元素即可轻松实现。
如图:
至于【empty】元素的数量需要不小于单行最多元素的数量即可,
最后我们将empty设置隐藏即可
.empty { visibility: hidden; }完整demo代码
【JSFiddle地址】
https://jsfiddle.net/zwwill/43qnjxyL/
并排等分,单排靠左最齐布局 1 2 3 4 5 6 7 8 9 10 11 12 empty empty empty empty empty empty empty empty empty
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112544.html
摘要:现成的布局方式布局,具有等分布局的能力,如图问题但是底部我们并不想如此等分,我们更希望可以同上一排对齐方案其实很简单,我们只要在后面加入一些等宽但是占高为等隐藏元素即可轻松实现。 效果先行 showImg(https://segmentfault.com/img/remote/1460000016787621?w=1836&h=875); 需求 showImg(https://segm...
摘要:完整代码请戳我们回到小程序,此时接口返回的数据如下可以看到每个图片都有高度了,接下来我们实现瀑布流布局,等下,我们搞下瀑布流布局的懒加载,关于小程序的懒加载,猛戳了解更多。 效果图 来来来,看啊看,外面的世界多好看, showImg(https://segmentfault.com/img/remote/1460000014887454?w=371&h=580); 效果图展示的是瀑布流...
摘要:因为端和移动端布局差异较大,所以我将两端布局分开讲,本文章将针对端的布局进行讲解,以下代码只写关键代码。为了提高网页性能,考虑到,表格元素尽量少用,有其他选择的情况尽量用其他布局。 前言 此文章是 解剖CSS布局原理 的续集,之前那篇文章讲的都是理论,本文章讲具体的实例,根据自己对布局的理解与开发经验分为以下几类。 因为PC端和移动端布局差异较大,所以我将两端布局分开讲,本文章将针对P...
阅读 680·2023-04-25 17:33
阅读 3585·2021-07-29 14:49
阅读 2453·2019-08-30 15:53
阅读 3396·2019-08-29 16:27
阅读 1962·2019-08-29 16:11
阅读 985·2019-08-29 14:17
阅读 2393·2019-08-29 13:47
阅读 1987·2019-08-29 13:28