GALLERY区文本设置问题

GALLERY区文本设置问题

老师您好,如何才能让Gallery区的文本显示在图片的上方?我尝试了在不同div上设置z-index但是未能实现范例中的效果,望老师解答,谢谢!

相关代码:

http://img1.sycdn.imooc.com//climg/604a7ebb0942166a28801800.jpg

http://img1.sycdn.imooc.com//climg/604a7ebb098c192828801800.jpg


正在回答

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

1回答

同学,你好!HTML代码中将文字直接放在div标签中即可

<div class="image-text ">
    <img src="images/03-01.jpg">
    <div class="galleryimg-text">SCIENCE LAB</div>
</div>

同学再尝试一下,如果还是不行,可将完整代码粘贴在这里,便于老师调试

祝:学习愉快!

  • 钱榕 提问者 #1

    HTML:

    <div class="galleryimage">

    <div class="image-text">

    <img src="images/03-01.jpg">

    <div class="galleryimg-text">SCIENCE LAB</div>

    </div>

    <div class="image-text">

    <img src="images/03-02.jpg">

    <div class="galleryimg-text">INDOOR STADIUM</div>

    </div>

    <div class="image-text">

    <img src="images/03-03.jpg">

    <div class="galleryimg-text">TRANSPORTATION</div>

    </div>

    <div class="image-text">

    <img src="images/03-04.jpg">

    <div class="galleryimg-text">KIDS ROOM</div>

    </div>

    <div class="image-text">

    <img src="images/03-05.jpg">

    <div class="galleryimg-text">MEDITATION CLASSES</div>

    </div>

    <div class="image-text">

    <img src="images/03-06.jpg">

    <div class="galleryimg-text">KIDS PLAYGROUND</div>

    </div>

    </div>


    CSS:

    .galleryimage{

    width: 1000px;

    height: 460px;

    margin-top: 25px;

    }

    .image-text{

    width: 300px;

    height: 200px;

    margin-right: 30px;

    margin-bottom: 30px;

    float: left;

    }

    .galleryimage img{

    width: 300px;

    height: 200px;

    margin-right: 30px;

    margin-bottom: 30px;

    }

    .galleryimg-text{

    width: 300px;

    height: 50px;

    line-height: 50px;

    background-color: black;

    color: white;

    margin-top: -84px;

    margin-left:0px;

    font-family: Microsoft YaHei UI;

    }

    2021-03-13 02:38:28
  • 好帮手慕燕燕 回复 提问者 钱榕 #2

    同学,你好!同学的代码逻辑清晰,稍微调整下样式即可

    1、外层<div class="image-text">底部边距不够,可调整为80px

    .image-text{
    width: 300px;
    height: 200px;
    margin-right: 30px;
    /* argin-bottom: 30px; */
    margin-bottom: 80px;
    float: left;
    }

    2、图片和底部的文字之间没有距离,不用设置底部外边距

    .galleryimage img{
    width: 300px;
    height: 200px;
    margin-right: 30px;
    /* margin-bottom: 30px; */
    }

    3、文字div嵌入图片过多,顶部边距可调整为-5px

    .galleryimg-text{
    width: 300px;
    height: 50px;
    line-height: 50px;
    background-color: black;
    color: white;
    /* margin-top: -84px; */
    margin-top: -5px;
    margin-left:0px;
    font-family: Microsoft YaHei UI;
    }

    ​祝:学习愉快!

    2021-03-13 10:35:07
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
3.从网页搭建入门Python Web
  • 参与学习           人
  • 提交作业       218    份
  • 解答问题       3562    个

本阶段带你用Python开发一个网站,学习主流框架Django+Flask是Python Web开发的第一步,在基础知识上实现积分商城的项目开发,体验真实的项目开发流程,提高解决编程问题和效率的能力。

了解课程
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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