2-10作业题GALLERY区思路

2-10作业题GALLERY区思路

<div class="gallery-b">
     <div class="gallery-pic">
                                <img src="images/03-01.jpg">
				<img src="images/03-02.jpg">
				<img src="images/03-03.jpg">
				<img src="images/03-04.jpg">
				<img src="images/03-05.jpg">
				<img src="images/03-06.jpg">
			</div>
		</div>

然后CSS写的是

.gallery-b{
	width: 700px;
	height: 500px;
	margin:0 auto;
}

.gallery-b img{
	width: 200px;
	height: 150px;
	margin:5px; 
}

用这种布局效果来达到我的图片显示效果,但是字我不知道该如何浮动在图片上面,并且不知道我这里思路是否正确。希望老师指导。

正在回答

登陆购买课程后可参与讨论,去登陆

2回答

用一个div包裹一个图片以及文字,这样的div需要写6个。第一次回答中老师已经给了布局建议以及css样式了哦,让文字相对于外层包裹的div盒子来定位,bottom为0。

http://img1.sycdn.imooc.com//climg/5bf2147e00011c0204280528.jpg

自己测试下吧。

  • 风褛先生 提问者 #1
    完全明白了,谢谢老师!
    2018-11-19 09:51:18
好帮手慕星星 2018-11-18 12:17:23

可以使用定位来完成,用一个div包裹图片和文字,参考:

http://img1.sycdn.imooc.com//climg/5bf0e79300012a9404610103.jpg

http://img1.sycdn.imooc.com//climg/5bf0e7ca00011d2904180533.jpg

自己修改测试下,祝学习愉快!

  • 提问者 风褛先生 #1
    想问一下,是用一个div来包裹一个图片加文字,还是用一个div来包裹6张图片再加6个文字呢
    2018-11-19 08:45:54
  • 提问者 风褛先生 #2
    然后还是不明白字如何分别浮动在每个图片上面,这个代码该如何写
    2018-11-19 08:48:59
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师