.icon-img-content的宽度问题

来源：7-5 Vue项目首页 - 图标区域页面布局

慕虎5515243

2020-11-18

图片描述

4aaf7e284da44402.jpg_224x148_450bfa61.jp

热门景点

老师我看你 .icon-img-content没有加width:100%
是可以的，但是我这里怎么不加上就会有出现图片中的问题

写回答

2回答

Dell

2020-11-18

已采纳

这个可能是浏览器或者调试工具的问题，你不用管我的，版本有些老了，你用你的环境跑正确即可。

慕虎5515243

非常感谢！

2020-11-19

共1条回复

慕虎5515243

提问者

2020-11-18

<template>
<div class="icons">
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>
<div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div><div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div><div class="icon">
<div class="icon-img">
<img class="icon-img-content"
src="https://imgs.qunarzz.com/p/tts3/2011/a0/4aaf7e284da44402.jpg_224x148_450bfa61.jpg">
</div>
<p class="icon-desc">热门景点</p>
</div>

</div>

</template>

<script>
export default {
name: "HomeIcons"
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.icons
overflow: hidden
height: 0
padding-bottom 50%

.icon
overflow: hidden
float: left
width: 25%
height: 0
padding-bottom 25%
position: relative

.icon-img
position: absolute
top: 0
right: 0
left: 0
bottom: .44rem
box-sizing border-box
padding: .1rem

.icon-img-content
display: block
margin: 0 auto
height: 100%
/*width:100%*/

.icon-desc
position: absolute
right: 0
left: 0
bottom: 0
height .44rem
line-height: .44rem
color:$darkTextColor
text-align :center

</style>

Vue2.5-2.6-3.0开发去哪儿网App 零基础入门到实战

课程紧跟Vue3版本迭代，企业主流版本Vue2+Vue3全掌握

10675 学习 · 8191 问题

查看课程

相似问题

.icon中的height:0是什么意思？

回答 1

第二个的宽度是25%,那它是相对于哪个的宽度的25%

回答 1

你这里icons设置padding-bottom: 50%，高度是宽度的一半，为啥icon设置成padding-bottom: 25%;

回答 2

这样写的实际含义是.header .header-left .back-icon还只是.back-icon而已？

回答 3

文字位置不对（icon-desc)

回答 2

打开慕课网App查看更多内容