股利調整

Question

後移動這就是我想要實現^（這是一個iphone5的320x568視圖）

但是，當我調整窗口的大小（以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%); 
    } 

更新後，自堆棧溢出要求我增加更多的信息，因爲我的帖子主要是代碼。是的，你明白了，讓我們看看這是否足夠。 「信息」

Answer 1

你的目標是保持文本下的白線，在blacktransparent元素的中間。

要做到這一點，你需要從線元素，在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; 
}