我需要在div的顶部显示50%的图像,并且我使用css的组合使其工作到top: -100px;
,它在标题&下面增加了额外的区域。我不想要的副标题
https://codepen.io/anon/pen/JLBxBP
.main-wrapper{ position:relative; width:100%; height:100%; margin:0 auto;background-color:yellow;}
.content-wrapper{ height:500px; background-color:blue; max-width:1070px;}
.gb-red{background-color:#f00;}
.gb-green{background-color:green;}
.cover-image-w{position:relative;z-index:2;}
.center-img {margin: 0 auto; max-height:250px; z-index:2;}
.titles-w {
position: relative;
width: 100%;
z-index: 1;
background-color: #EFEFEF;
min-height: 125px;
border-top: 125px solid yellow;
padding-bottom: 10px;
top: -100px;
}
.titles-w > h1 { font-size:18px; width:100%; text-align:center;font-weight:600; margin:5px 0 5px 0;}
.titles-w > h2 { font-size:15px; width:100%; text-align:center; margin:10px 0 5px 0;}
<div class="main-wrapper">
<div class="container content-wrapper">
<div class="row">
<div class="col-md-5 col-sm-5 col-sm-push-7 gb-red">
<div class="cover-image-w">
<img class="img-responsive center-img" src="https://topbackgroundwallpaper.com/wp-content/uploads/2018/01/images-mobile-wallpaper-1200-swan-l.jpg" alt="">
</div>
<div class="titles-w">
<h1>TITLE HERE</h1>
<h2>SU TITLE</h2>
</div>
</div>
<div class="col-md-7 col-sm-7 col-sm-pull-5 gb-green">
<div class="latest-art-w">
<h1>Trump threatens tariffs on Chinese industrial goods</h1>
<p>Duties of 25% planned for products as ranging from robots asdasdand trains to snowblowers. Duties of 25% planned for products ranging from robots and trains to snowblowers. Duties of 25% planned for products ranging from robots and trains to snowblowers Duties of 25% planned for products ranging from robots and trains to snowblowers</p>
</div>
</div>
</div>
</div>
</div>
不知道如何删除多余的空间,如本例所示。
答案 0 :(得分:1)
使用top: -100px
更改margin-top: -100px
,以便正确计算父元素的高度。
事实上,如果您使用top
(或left/right/bottom
)和relative
位置移动元素,则不会影响或重新计算其父容器的周围空间(这将是计算为元素位于static
位置)。
答案 1 :(得分:0)
您可以向.titles-w
元素添加负边距,以减少下方的空间。例如:
.titles-w {
position: relative;
width: 100%;
z-index: 1;
background-color: #EFEFEF;
min-height: 125px;
border-top: 125px solid yellow;
padding-bottom: 10px;
top: -100px;
margin-bottom: -100px;
}
见https://codepen.io/anon/pen/WzKPVy。您可能希望增加边距以说明-85px
以保持红色边框效果。