代码分享:CSS实现图片并排展示,手机端换行显示

SHOPYY的积木模板提供有可自定义编辑的板块,跨境电商独立站商家可以自定义实现各种排版。如想实现下图的排版效果,如何自己编辑代码实现呢?

代码分享:CSS实现图片并排展示,手机端换行显示插图
PC端效果展示
代码分享:CSS实现图片并排展示,手机端换行显示插图1
手机端效果展示

代码如下:

<style>
.Rich_text_0730{width:100%; overflow:hidden;}
.Rich_text_0730 img { max-width:500px;}
.Rich_text_0730>div{ width:clac(50% – 4px); float:left;}
.Rich_text_0730 .Rich_text_left{ margin-right:4px}
.Rich_text_0730 .Rich_text_right{ margin-left:4px}

@media screen and (max-width:768px){
.Rich_text_0730>div{ width:100%; float:none; margin:10px 0 !important;}
.Rich_text_0730 img { max-width:100%;}
}
</style>

<div class=”Rich_text_0730 “>
<div class=”Rich_text_left”><img src=”https://us01-imgcdn.ymcart.com/***/2020/07/29/e/e/eeeb712d6c782acd.jpg” alt=”” /></div>
<div class=”Rich_text_right”><img src=”https://us01-imgcdn.ymcart.com/***/2020/07/29/e/5/e54c5bab74beb1a7.jpg” alt=”” /></div>

</div>

这套代码可以实现PC端自适应移动端展示。

注意:代码中的图片地址有隐藏信息,请更换成自己的图片地址。


结尾:跨境如戏-全靠演技-如没演技-完全没戏!
跨境电商发展很快,资讯更新快有效性短,胆子要大,行动要快,路子要野。
Jerry长期专注在独立站领域,要建站广告投放合作的朋友,请加微信号jerryxczc。

本文链接地址:https://www.ecacting.com/saas/469 英雄不问来路,转载请注明出处,谢谢。
有话想说:那就赶紧加我微信吧.

Related Posts