Question

我正在构建一个视差网站，并且在一个部分中使两个div完全对齐，同时仍然保持其响应特性时会遇到问题。

不幸的是，当窗口大小改变时，两个元素的行为不符合预期。我已经包含了一个图像，说明了我想要实现的目标。黄线表示我正在寻找的控件。文本THIS IS应与水平轴上的橙色文本完全内联，而SO AWESOME的边缘应与橙色文本垂直对齐。

我如何实现这一目标？

CSS

body,
html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

* {
  padding: 0;
  margin: 0;
}

.header_container__1 {
  font-size: 2vw;
  line-height: 2vw;
  color: orange;
  top: 42vh;
  left: 35vw;
}

.header_container__2 {
  text-align: right;
  font-size: 10vw;
  line-height: 10vw;
  color: red;
  top: 50vh;
  right: 0;
  transform: translate(0%, -50%);
}

HTML

<section>
  <div class="header_container__1">
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
    <p>This is some text i want perfectly </p>
  </div>
  <div class="header_container__2">
    <p>THIS IS</p>
    <p>SO AWESOME</p>
  </div>

</section>

Answer 1

不多说，只是几个css对齐属性的组合：

＆＃13;

body {
  width:100%;
  height: 100vh;
  margin: 0px;
  background: black;
}

#supercontainer {
  position: absolute;
  top: 50%;
  right: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);  
}

#container {
  display: inline-block;
  position: relative;
}

#a1 {
  display: inline-block;
  font-size: 0;
  color: tomato;
  margin-right: 0px;
  margin-left: auto;
  position: relative;
  text-align: right;
  margin: 0px;
  font-size: 4em !important;
  vertical-align: top;
  line-height: 0.8em;
}

#a1::first-line {
  line-height:1em;  
}

#a2 {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.7em;
  line-height: 2px;
  font-weight: bold;
  color: gold;
  vertical-align: baseline;
}

#a2::first-line {
  line-height: 0px;
}

＆＃13;

<div id=supercontainer>
<div id=container>
  
<div id=a1>THIS IS<br>SO AWESOME</div>
  
<div id=a2>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
<p>This is some text i want perfectly </p>
</div>
  
</div>
</div>

＆＃13;

Answer 2

~~作为快速解决方法，请从transform中删除header_container__2，并将两个容器的top属性设置为相等。 Fiddle~~

修改以50％对齐

body,
html {
  height: 100%;
  background-color: black;
}

section {
  height: 100%;
  position: relative;
}

section > div {
  position: absolute;
}

* {
  padding: 0;
  margin: 0;
}

.header_container__1 {
  display: inline-block;
  float: left;
  font-size: 2vw;
  line-height: 2vw;
  color: orange;
}

.header_container__2 {
  text-align: right;
  font-size: 10vw;
  line-height: 10vw;
  color: red;
  top: 50vh;
  right: 0;
  transform: translate(0%, -50%);
}

<section>
  <div class="header_container__2">
    <div class="header_container__1">
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
      <p>This is some text i want perfectly</p>
    </div>
    THIS IS
    <p>SO AWESOME</p>
  </div>
</section>

响应对齐两个div与纯文本的视差

2 个答案: