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

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

PC端效果展示
手机端效果展示

代码如下:

<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端自适应移动端展示。

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

You May Also Like

About the Author: Jerry

发表评论

电子邮件地址不会被公开。 必填项已用*标注