html - CSS 盒子有箭头，除了一个

Question

我正在创建一个消息传递系统，一个用户可以在其中与另一个用户通话。我创建了带有箭头的消息框。到目前为止，所有方框都有箭头，只有一个除外(见下图)。此外，高度不会根据内容自动调整。有人可以看一下我的代码以了解发生了什么吗？

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/bitmap-copy@2x.png 2x, 
             img/bitmap-copy@3x.png 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/bitmap-copy@2x.png 2x, 
             img/bitmap-copy@3x.png 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;

}

Answer 1

我总是使用 height: inherit; 作为高度属性。它将创建一个包含文本的框，底部没有任何可用空间。因此，如果您有 3 行的文本，它会创建 20% 左右的高度，如果您有 6 行，它会创建 40% 的高度，等等。希望对您有所帮助。