2017-05-06 162 views
0

我正在創建一個消息系統,其中一個用戶與另一個用戶說話。我用箭頭創建了消息框。到目前爲止,所有的盒子都有箭頭,除了一個(見下面的圖片)。此外,高度不會自動調整到內容。有人可以看看我的代碼,看看發生了什麼?CSS盒除箭頭外有箭頭

enter image description here

enter image description here

HTML

<div class="col-xs-7 live-chat-feed"> 


      <div class="chat-date"><p>Friday 12:34</p></div> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap(3).png" 
    srcset="img/bitmap(3)@2x.png 2x, 
      img/bitmap(3)@3x.png 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Hey there! <br> 
      I noticed that not only are you a football fan 
      but you also go to a lot of games! What do you think about the upcoming season and who is your favorite team? Looks to me like you are a Pats fan!</p> 
      </div> 



      </div> 





      <div class="new-live-chat"> 



      <div class="chat-date"><p>Saturday 22:40</p></div> 

      <div id="current-user"> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap-copy.png" 
    srcset="img/[email protected] 2x, 
      img/[email protected] 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Wow! That’s awesome. I love football and im a beat writer for the Pats & have the luxury of catching their games!</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      What about you? Are you a Pats fan yourself?</p> 
      </div> 
      </div> 
      </div> 

      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap(3).png" 
    srcset="img/bitmap(3)@2x.png 2x, 
      img/bitmap(3)@3x.png 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
       Oh yeah! Brady with the SB win again this year! </p> 
      </div> 
      </div> 

      <div id="current-user"> 
      <div class="user-post"> 
      <div class="chat-avatar"> 
      <img src="img/bitmap-copy.png" 
    srcset="img/[email protected] 2x, 
      img/[email protected] 3x" 
    class="Bitmap"><p class="time-posted">12:47</p> 
      </div> 

      <div class="single-post-box"> 
       <p class="chat-content"> 
      Thats pretty cool! No idea how much of a Pats fan you were to already have season tix! I dont even have them yet!</p> 
      </div> 


      </div> 
      </div> 


      </div> 

CSS

.live-chat-feed { 
    margin-left: 50%; 
    margin-top: -310%; 
    background-color: #000; 

} 

.new-live-chat { 
    margin-top: 20%; 
} 

.chat-avatar { 
    position: relative; 
    left: -30%; 
    top: 85px; 
} 

.chat-date, 
.chat-content, 
.time-posted { 
    color: #8785ab; 
} 

.chat-date { 
    position: relative; 
    left: 30%; 
} 

.single-post-box { 
    width: 729.9px; 
    height: auto; 
    border-radius: 2px; 
    background-color: #ffffff; 
    box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55); 
    margin-bottom: 10%; 
    padding: 20px; 
} 


#current-user .single-post-box { 
    position: relative; 
    left: -15%; 
    border-radius: 2px; 
    background-color: #1ac384; 
    box-shadow: 0 2px 4px 0 rgba(167, 169, 197, 0.55); 

} 

.single-post-box::after { 

    content: ''; 
    height: 0; 
    position: absolute; 
    width: 0; 
    border: 10px solid transparent; 
    border-right-color: #fff; 
    right: 97.5%; 
    top: 115px; 


} 


#current-user .single-post-box::after { 

    content: ''; 
    height: 0; 
    position: absolute; 
    width: 0; 
    border: 10px solid transparent; 
    border-left-color: #1ac384; 
    left: 100%; 
    top: 0px; 

} 
+0

您所描述的問題無法用您迄今提供的代碼進行復制。爲了讓別人來幫助你,請提供所有相關的代碼。謝謝! – Mers

+0

@我認爲有足夠的代碼來解決問題,因此它是相關的。還需要什麼? –

+0

@Mers我剛添加了所有與CSS相關的CSS。這應該有所幫助。 –

回答

0

我總是用height: inherit;爲height屬性。它將創建一個包含文本的框,而在底部沒有任何可用空間。所以如果你喜歡3行的文本,它會創建一個20%的高度,如果你有6行,它會創建40%的高度,等等。希望有幫助。