作者st1009 (前端攻城师)
看板Web_Design
标题[问题] 图片抓不到之後影响到下方物件的距离
时间Sat Sep 8 21:32:11 2018
不好意思打扰各位大大，对於这个问题我觉得很莫名不知道哪里出问题，所以上来问>///<
如题，今天我一张图片抓不到时，会影响下方的物件的距离，如下图
https://imgur.com/a/z9Ogj9o
如图底下的"是否喜欢此广告？"在抓不到图片时，上移了一点点，但奇怪的是图片的大小
没变阿... 既然没变怎会影响到其他东西的距离，我真的不懂Orz
以下为我在html部份的程式码，掺入了一些php，PTT上不好排版请见谅
文章底下有给个网页版的网址，大家也可以去那边看程式码>"<
<div class="event_item weather_type event_open" >
<div class="event_title">
<?php echo $row['name'] ?>
</div>
<a href="<?php echo $row['link'] ?>">
<img src="<?php echo $row['img'] ?>" alt="ERROR" class="event_item_pic" />
</a>
<div class="event_text" >
<input name="like[]" style="position: relative;"
type="checkbox" value="<?php echo $row['id']; ?>">是否喜欢此广告？
</div>
<img src="image/event_item_shadow.png"
alt="event_item_shadow" class="event_item_shadow">
</div>
以下是我使用的CSS
.event_title {
font-size: 16px;
height: 30px;
color: green;
}
.event_item{
border: 1px solid rgb(175, 176, 176);
border-radius: 2px;
width: 200px;
float: left;
margin-left: 10px;
margin-bottom: 10px;/*RWD实行时可让项目间留空*/
padding: 10px 10px 30px 10px;/*上右下左*/
background-color: rgb(255, 255, 255);
position: relative;/*因为预设的position为static，而static不能被absolute用来
上层定位，故多个relative但又不影响原先的位置*/
font-family: SimHei,Microsoft YaHei;
}
.event_item .event_item_pic{
width: 180px;
height: 100px;
position: relative;
left: 50%;
margin-left: -90px;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 1px solid rgb(201, 15, 9);
}
.event_item .event_title{
text-align: center;
letter-spacing: 1px;
}
.event_item .event_text{
/*background-color: blue;*/
font-size: 13px;
line-height: 19px;
}
.event_item .event_text p{
color: green;
}
.event_item .event_text p span{
color: black;
font-size: 12px;
}
=====================================
这边可以看程式码唷！
http://jsfiddle.net/2n8oekux/14/
=====================================
--
半壁河山半攻守
半争成败半悟道
许银川
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 1.163.128.83
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Web_Design/M.1536413535.A.876.html
※ 编辑: st1009 (1.163.128.83), 09/08/2018 21:48:28
1F：→ joybee: .event_item_pic 设 display: block; 09/08 22:48
有效，谢谢！
※ 编辑: st1009 (1.163.128.83), 09/08/2018 23:01:12