代码分享: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端自适应移动端展示。

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

Related Posts