我需要在 CSS 转换后缩小间隙:translateY(-50%) 以便内容自然流动。
我尝试了其他方法,但无法将元素向上移动其自高度度的 50%。作为百分比的负边距基于窗口的高度,因此这似乎不是一个选项,我也不能在以下元素上设置负边距,因为它需要基于标题的高度。
HTML:
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
CSS:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
transform: translateY(-50%);
background-color: yellow;
}
JS fiddle :
https://jsfiddle.net/robertirish/tyh18orq/16/
这可能只有使用 Javascript 才有可能,但使用纯 CSS 完成它会很棒,因为 JS 和媒体查询很难实现。
提前致谢。
最佳答案
不使用transform: translateY(-50%)
,而是使用margin-top: -25vh
。
这将放置.title -container
在同一个地方,但保持 .article-body
在它下面齐平:
.header {
width: 100%.
position: relative;
}
.featured-image {
width: 100%;
height: 200px;
background-color: blue;
}
.title-container {
width: 50%;
margin: 0 auto;
/*transform: translateY(-50%);*/
margin-top: -25vh;
background-color: yellow;
}
<div class="header">
<div class="featured-image">
<!-- this is in place of the featured image -->
</div>
<div class="title-container">
<h1>Title<br />goes<br />here</h1>
</div>
</div>
<div class="article-body">
<p>There is too much space above class="article-body". I want the content to flow on naturally after class="title-container", however using translateY is purely visual so an alternate method of moving the yellow block up by 50% of its own height is necessary.</p>
</div>
关于css - 转换后继续文档流 : translateY(-50%),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56843773/