html+css问题 图片和文字如何并排 通过CSS+DIV怎么将文字写在图片上方
\u6c42\u6559HTML+CSS\u5e03\u5c40\u95ee\u9898\uff0c\u6587\u5b57\u56fe\u7247\u5728\u4e00\u884c\u6587\u5b57\u56fe\u7247
\u5728\u6574\u4e2a\u5916\u5c42\u5bbd\u5ea6\u8db3\u591f\u5927\u7684\u60c5\u51b5\u4e0b\uff0c\u6587\u5b57\u4e0e\u56fe\u7247\u5c31\u662f\u4f1a\u5728\u4e00\u884c\uff0c\u82e5\u662f\u548c\u6587\u5b57\u4e00\u6837\u5927\u7684\u56fe\u7247\uff0c\u90a3\u57fa\u672c\u4e0a\u4e5f\u662f\u770b\u4e0d\u51fa\u662f\u4ec0\u4e48\uff0c\u5b83\u5e94\u8be5\u662f\u56fe\u6807\uff0c\u800c\u4e0d\u662f\u56fe\u7247\u3002
\u7f29\u5c0f\u56fe\u7247\u7684\u65b9\u6cd5\u5c31\u662f\u7ed9\u56fe\u7247\u6dfb\u52a0\u5bbd\u5ea6\u4e0e\u9ad8\u5ea6\uff0c\u628a\u8fd9\u4e9b\u5199\u5728\u6837\u5f0f\u8868\u7684\u6587\u4ef6\u4e2d\u3002\u5e76\u4e0d\u662f\u5b83\u4eec\u7684\u6570\u5b57\u662f\u4e00\u6837\u7684\uff0c\u5927\u5c0f\u5c31\u4f1a\u76f8\u540c\uff0c\u8981\u4e0d\u65ad\u7684\u8c03\u6574\u3002
HTML\u56fe\u7247\u548c\u6587\u5b57\u662f\u5e76\u5217\u663e\u793a\u7684\u3002\u5982\u4e0b\uff1a
1. \u5c06\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u6211\u4eec\u52a0\u4e2adiv\u628a\u56fe\u7247\u548c\u6587\u5b57\u5305\u5728\u4e00\u8d77\uff0c\u5e76\u4e14\u52a0\u4e0aimg-group\u548cimg-tip\u8fd9\u4e24\u4e2aclass\uff0c\u4fbf\u4e8e\u540e\u9762\u7684\u5904\u7406\u3002
\u6211\u4eec\u8981\u8ba9\u6587\u5b57\u6d6e\u5728\u56fe\u7247\u4e0a\u9762\uff0c\u9700\u8981\u52a0\u4e0a\u5b9a\u4f4d\u3002\u770b\u6587\u5b57\u6d6e\u5728\u4e86\u56fe\u7247\u7684\u5e95\u90e8\u3002
display: inline-block;\u4e0e\u5b9a\u4f4d\u65e0\u5173\uff0c\u53ea\u662f\u4f7f\u6574\u4e2a.img-group\u957f\u5bbd\u4e0e\u56fe\u7247\u9002\u5e94\u3002
2. \u6587\u5b57\u4e0e\u80cc\u666f\u5904\u7406\u6587\u5b57\u5de6\u5bf9\u9f50\uff0c\u6211\u4eec\u628a\u6587\u5b57\u5c45\u4e2d\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
\u6587\u5b57\u4e0d\u6e05\u695a\uff0c\u6211\u4eec\u52a0\u4e0a\u80cc\u666f\u548c\u5b57\u4f53\u989c\u8272\uff0c\u5e76\u9002\u5f53\u7684\u8bbe\u7f6e\u4e00\u4e0b\u900f\u660e\u3002\u7ed9.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff1a
3. \u9f20\u6807\u60ac\u6d6e\u7279\u6548\u73b0\u5728\u9759\u6001\u6548\u679c\u5df2\u7ecf\u5b8c\u6210\u4e86\uff0c\u63a5\u4e0b\u6765\uff0c\u52a0\u4e00\u4e0b\u9f20\u6807\u60ac\u6d6e\u51fa\u73b0\u6587\u672c\u7684\u6548\u679c\uff0c\u73b0\u5728.img-tip\u6dfb\u52a0\u5982\u4e0b\u4ee3\u7801\uff0c\u8ba9\u6587\u672c\u9ed8\u8ba4\u9690\u85cf\uff1a
\u518d\u52a0\u4e0a\u9f20\u6807\u60ac\u505c\u5728\u56fe\u7247\u4e0a\uff0c\u663e\u793a\u6587\u672c\u7684\u4ee3\u7801\uff1a
\u4ee3\u7801\u603b\u6c47HTML
\u6211\u662f\u96ea\u8c79
CSS
.img-group { position: relative; display: inline-block;} .img-tip { position: absolute; bottom: 0; background: #333; color: #fff; opacity: 0.6; display: none;} .img-group:hover .img-tip { display: block; width: 100%; text-align: center;}
希望能够帮到您，感谢您的采纳。
有些浏览器会给图片加上默认边框并且带有颜色，你可以尝试设置图片css样式{border:0;}
如果这样没有解决，希望你能贴出图片和代码，以便进一步分析。
可以有很多方式实现
1、使用float:left;这样没超出宽度前都不会换行。但是需要加上清除浮动
.clr:after{clear:both;display:block;overflow:hidden;height:0;content:".";}
2、使用flex布局，.flex{display:flex;}现在很流行的写法。
如果是橙色块就是给了外边距margin，如果你不想要外边距的话就margin：0；就可以了
没有贴代码 实在不知道你到底哪里出了问题
扩展阅读：html+css+javascript ... html+css+js手机软件 ... html+css网页制作成品 ... 404页面html网站源码 ... 学生个人网页制作html ... html+css图片轮播代码 ... htmlcssjs手机编辑器下载 ... html+css代码大全 ... img图片居中css ...
