#图片和文字是怎么呈现这样的效果的
#图片和文字是怎么呈现这样的效果的
#图片和文字是怎么呈现这样的效果的
2条回答 默认 最新
- CSDN专家-天际的海浪 2022-01-02 21:58关注
用float: left或right; 左右浮动图片
你题目的解答代码如下:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title> 页面名称 </title> <style type="text/css"> .box { width: 300px; } .box > div{ margin: 20px 0px; } .box > div:nth-child(2n){ float: left; } .box > div:nth-child(2n+1){ float: right; } .box > div img{ vertical-align: middle; } .box > div .text{ display: inline-block; margin: 20px; } </style> </head> <body> <div class="box"> <div> <img src="1.jpg" width="150" height="80" alt="" /> <div class="text">文本</div> </div> <div> <img src="1.jpg" width="150" height="80" alt="" /> <div class="text">文本</div> </div> <div> <img src="1.jpg" width="150" height="80" alt="" /> <div class="text">文本</div> </div> <div> <img src="1.jpg" width="150" height="80" alt="" /> <div class="text">文本</div> </div> <div> <img src="1.jpg" width="150" height="80" alt="" /> <div class="text">文本</div> </div> </div> </body> </html>
如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 1无用
悬赏问题
- ¥15 程序不包含适用于入口点的静态Main方法
- ¥15 素材场景中光线烘焙后灯光失效
- ¥15 请教一下各位,为什么我这个没有实现模拟点击
- ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
- ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
- ¥20 有关区间dp的问题求解
- ¥15 多电路系统共用电源的串扰问题
- ¥15 slam rangenet++配置
- ¥15 有没有研究水声通信方面的帮我改俩matlab代码
- ¥15 ubuntu子系统密码忘记