0
我正在創建一個消息系統,其中一個用戶與另一個用戶說話。我用箭頭創建了消息框。到目前爲止,所有的盒子都有箭頭,除了一個(見下面的圖片)。此外,高度不會自動調整到內容。有人可以看看我的代碼,看看發生了什麼?CSS盒除箭頭外有箭頭
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;
}
您所描述的問題無法用您迄今提供的代碼進行復制。爲了讓別人來幫助你,請提供所有相關的代碼。謝謝! – Mers
@我認爲有足夠的代碼來解決問題,因此它是相關的。還需要什麼? –
@Mers我剛添加了所有與CSS相關的CSS。這應該有所幫助。 –