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％的高度，等等。希望有所帮助。

CSS框除了一个

1 个答案: