最近在摸索图片一行多列的实现方法,目前自行实现的有两种,如果OB粉丝们有更多实现方法,欢迎交流切磋!两种都是通过CSS实现,目前还没找到通过MD语法直接实现的途径;需要这个功能主要是因为有时图片多的时候,每个图片都是全宽,感觉有种很傻的感觉,太浪费占地面积。。。
第一种是通过FLEX布局来实现,不需要任何的CSS引入,使用原生的CSS,简单方便,缺点是模式单一,就是实现一行多列,几个图片就几列,没法实现多行多列,要实现的话,得重新再写独立的代码引入图片;就是如图所附的样例和代码;
第二种是通过引入其它CSS库来解决,我使用了BULMA,其实BOOTSTRAP也可以,但是BULMA可以实现更多的图片排版花样,而且类名逻辑也非常简单,通俗易懂易记忆,所以用了BULMA;第一次开始用的时候,效果是实现了,但是发现这个BULMA的类名因为跟系统本身的类名有重合,导致样式污染,无法正常使用,然后就搁置了。。。直到有一天,无意中发现BULMA有个前缀类名的定制版,发现可以解决这个污染问题,就是所有的类名要在签名加上【bulma-】,这就跟其他给区分开了;第二次测试效果OK,今天暂时没有放入样例。
跟第一个方法比,就是需要引入下BULMA的link链接,多了一个动作,但是可以玩的花样多了不少,如果对于图片比较多的情况,推荐用BULMA;
如果大家有更好方法,欢迎加入一起分享下你的秘笈!!!
<div style="display:grid; grid-auto-flow: column;">
<img src="https://url.jpg" style=" padding-right: 10px;" />
<img src="https://url.jpg" style=" padding-right: 10px;" />
<img src="https://url_01.jpg" style="" />
</div>