Div 调整大小后移动

Question

这就是我想要实现的 ^（这是 iphone5 320x568 上的视图）

但是当我调整 window 的大小时（到 iphone 6 375x667 ）我得到这个

HTML:

    <div id="container">
        <div class="slicedimage">
            <div class="textboxtransparant">
                <h2>Since 1928</h2>
                <div class="divider"></div>
                <br/>
                <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
                </p>
                <i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
            </div>
            <div class="transparantblack"></div>
        </div>
       <div class="slicedimage">
         <div class="textboxblack">
             <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non 
             </p>

         </div>
         <div class="blacktransparant"></div>
         <div class ="line"></div>
       </div>

CSS:

  body {
      margin: 0;
      padding: 0;
      font-size: 16px;
      /*font-family: Georgia;*/
      font-family: sans-serif;
      max-width: 640px;
      color: black;
  }

  #container {
      display: block;
      height:900px;
      width: 100%;
      position: relative;
      top: 50px;
      margin: 0;
      color: white;
      text-align: center;
  }

  .slicedimage {

      background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
      width:100%;


  }



    .textboxblack {

      background-color:black;

  }


  .line {

  position: absolute;
  width:1px;
  height: 50px;
  bottom: 80px; /*half the height*/
  left: 50%;
  border-left: 1px solid white;

  }

  .transparantblack {
    height: 100px;
  width: 100%;
  background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
  }

.blacktransparant {
      height: 100px;
    width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
    }

  .blackgray {
    height:300px;
    width:100%;
    background:linear-gradient(341deg, #8a8a8a  0%, #8a8a8a  31.9%, #000 32.1%, #000 100%);
  }

更新了 post，由于堆栈溢出要求我添加更多信息，因为我的 post 主要是代码。是的，你明白了，让我们看看这是否足够。 "information"

Answer 1

您的目标是将白线保留在文本下方，位于黑色透明元素的中间。

为此，您需要从 line 元素创建 blacktransparant 的子元素 div:

<div class="blacktransparant">
   <div class="line"></div>
</div>

并将 blacktransparant 设置为相对的：

.blacktransparant {
   height: 100px;
   width: 100%;
   background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
   /* Add this */
   position: relative;
}

之后你只需要将箭头设置在相对于 blacktransparant 的正确位置 div:

.line {
   position: absolute;
   width: 1px;
   height: 50px;
   /* bottom: 80px; Change to 25px */
   bottom: 25px;
   left: 50%;
   border-left: 1px solid white;
}

Div 调整大小后移动

Div moving after resizing

html

css

responsive