2017-08-24 46 views
0

好球員,所以我有這個綠色的容器: enter image description here引導使柱留在母公司的底部

我需要的文本 - 你想聊天? - 是在它的底部的父(綠色背景) enter image description here

我嘗試添加一個風格類似這樣的文字:

<div class="row" style="position: relative;"> 
    <div style="position: absolute; bottom:0; right:0;"> Would you like to chat ? </div> 
</div> 

但沒有工作,該文本只是在另一個文本上,而不是底部。 我不想使用margin-top,因爲它不擅長手機屏幕。

下面是代碼:

<!-- About page --> 
<div class="container"> 
    <div class="row"> 
     <div class="col-lg-12"> 

      <div class="col-lg-6 bg-success"> 
       <div class="col-lg-6"> 
        <img src="images/girlprofile.jpg" class="img-responsive" alt="pic1notworking" height="220" width="220" style="padding-bottom: 25px; padding-top: 15px;"> 
       </div> 
       <div class="col-lg-6" style="padding-bottom: 25px; padding-top: 15px;"> 
        <center> 
         <div class="usernamestyle"> Username <br> </div> 
         <div class="onlinestyle"> 
         is currently online <br> 
         Would you like to chat ? <br> 

         </div> 
        </center> 
       </div> 
      </div> 

      <div class="col-lg-6"> 
       <p style="font-size: 140%"> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In condimentum, felis ac tristique tempor, tortor justo fringilla erat, id porta dui nisl quis leo. Proin non quam vitae erat placerat tincidunt. Mauris aliquam tempor finibus. Nulla a purus vehicula, tempus augue placerat, tincidunt odio. Mauris aliquet placerat urna vitae fermentum. Duis posuere risus ac elit mattis gravida. Pellentesque a quam eu massa efficitur aliquam. <br> <br> 
       Suspendisse tincidunt convallis nulla in pharetra. Ut ac erat convallis, dictum velit nec, sagittis ipsum. Quisque venenatis, nisi id consectetur imperdiet, nibh velit scelerisque arcu, ac placerat neque elit sit amet nisl. Aliquam nec dolor quam. Pellentesque maximus dui id justo ullamcorper auctor. Ut placerat purus vitae ipsum sodales, vel molestie magna finibus. 
       </p> 
      </div> 

     </div>   
    </div> 
</div> 

CSS:

.usernamestyle{ 
    font-size: 200%; 

} 

.onlinestyle{ 
    font-size: 160%; 
} 
+0

請加上你的CSS以及 – RasmusGlenvig

+0

@RasmusGlevig增加。 – IkePr

回答

0
<div class="col-lg-6" style="position: relative;height:100%; padding-bottom: 25px; padding-top: 15px;"> 
    <center> 
    <div class="usernamestyle"> Username <br> </div> 
    <div class="onlinestyle"> 
    is currently online 
    </div> 
    </center> 
    <div style="position: absolute; bottom:0; right: 0;"> 
    Would you like to chat ? 
    </div> 
</div> 
+0

不起作用。文本只是重疊在「目前在線」 – IkePr

+0

@IkePr我修復了我的代碼。添加高度 – zynkn

+0

這是結果:http://imgur.com/a/keywx – IkePr