文章链接地址:http://test1.baoxiaoyun.net/D...
没有图片时会出现下列效果:
没有图片时怎么调整上面的间距。
.share_title{/*不建议子元素设置一个高度,父元素再定一个*/
height: initial;
}
.share_title p{ /*通过修改p的高度可以达到share_title80px的效果,另外,建议给推荐加个class,用p后续修改风险比较大*/
line-height: 20px;
height: 20px;
}
.share_title.no-img a{ /*给没有图片的section加个no-img的class,我看你给item_detail加了width:100%了, 可以加到顶层元素上,后续通过顶层元素匹配的方式来呈现不同样式*/
height: 35px;
}
.share_title.no-img .item_detail{ /*去掉item_detail的style="width:100%;" 用css就可以了*/
width: 100%;
}
对应的html是
<section class="share_title">
<a href="http://test1.baoxiaoyun.net/Divide/ArticleInfo.html?art_id=5104">
<div class="item_detail" >
<h3>【人生】如果你得了大病,超过多少钱就会放弃治疗?</h3>
</div>
<div class="item_img">
<img src="/src/images/pic_loading.gif" data-bxysrc="/src/uploads/article/39/82/70/340982f418.jpg" alt=''/>
</div>
<div class="clear"></div>
</a>
<p>推荐</p>
</section>
<section class="share_title no-img"> <!--js判断是否有图片,没图片的时候添加class no-img-->
<a href="http://test1.baoxiaoyun.net/Divide/ArticleInfo.html?art_id=4856">
<div class="item_detail">
<h3>社保和商保的12个区别,有社保更要买商保!</h3>
</div>
<div class="clear"></div>
</a>
<p>推荐</p>
</section>
3 回答5.1k 阅读✓ 已解决
5 回答1.9k 阅读
2 回答1.9k 阅读✓ 已解决
1 回答2.9k 阅读✓ 已解决
3 回答2.4k 阅读
4 回答2.2k 阅读
3 回答2.1k 阅读
为什么一定要设置标题的边距,不能设置图片的边距呢