我如何计算在另一个div上方放置标题的顶部距离?

时间:2019-06-13 18:36:53

标签: jquery html css

我正在尝试使自己的标题“站在另一个div的顶部”,以得到以下结果。 使用绝对位置是可能的,但是要使其响应,我需要检查所有断点并将位置设置为“硬编码”(我不知道您是否这样说),但是要更改字体大小等。这似乎并不干净。 没有办法用jQuery计算此距离吗?

尽管我试图弄清楚这一点,但我考虑过要使用jQuery测量.banner-dark的高度,但是我到了该div的底部有一段距离,所以我需要到标题的顶部有一段距离。 因此应该是这样的:“标语的高度-暗”-“标题的高度”。 但是我不太确定该怎么做:)

我的小提琴:https://jsfiddle.net/a349dhkt/

.banner-dark {
  height: 200px;
  width: 100%;
  background-color: darkgrey;
}

.article-white {
  background-color: white;
  height: 200px;
  width: 100%;
}

h1 {
  font-size: 50px;
  color: white;
  position: absolute;
  top: 128px;
  left: 100px;
}
<div class="banner-dark">

</div>
<div class="article-white">
  <h1 class="title">SPECIAL TITLE</h1>
</div>

我希望我的标题恰好位于每个视口的第二个div的顶部。

1 个答案:

答案 0 :(得分:0)

我认为您正在寻找类似https://jsfiddle.net/an539fsg/

的内容
const Movies = () => {
    const [movies, setMovies] = useState(getMovies());
    const [disabled, setDisabled] = useState(true);
    const [pageSize, setPageSize] = useState(4);

const sortBy = sortType => {
    setMovies(movies.filter(sortType));
    setDisabled(false);
    // this.setState({
    //     movies: this.state.movies.sort(sortType),
    //     isDisabled: false,
    // });
};