display: flex,弹性布局
实现一个商品详情的布局效果,左边图片右边文字标题和描述,采用display: flex,弹性布局,code如下:
<html> <head> <title>我的第一个 HTML 页面</title> <style> .list { display: flex; } .info{ display: flex; flex-direction: column; margin-left: 10px; } img { width: 100px; height: 100px; } </style> </head> <body> <div class="list"> <img src="https://img2.baidu.com/it/u=1676260117,857699567&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=200" /> <div class="info"> <span>这是标题</span> <span>这是描述</span> <span>这是描述</span> <span>这是描述</span> </div> </div> </body> </html>
PS:转载请注明来源 https://www.cnblogs.com/sunshine-wy,疑问和勘误可在下方留言。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步