Css 为什么文本出现在div的底部？

我在div元素中放置了几个段落，但文本出现在块的底部。有什么问题吗？如果你能建议如何使积木更灵敏，那也太好了

HTML:

<div class="container">
    <div class="content">
    <div class="inner">
        <h1><span>What</span> Clients Says</h1>
        <div class="main-block">
        <div class="testimonial-block-1">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
            <p>- Staciya Trollio</p>
            <p>Customer</p>
            <p>Lorem Ipsum is simply dummy text of the printing
            and industry. Lorem Ipsum has been the industry.</p>
        </div>
        <div class="testimonial-block-2">
                <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
    <p>- David Soul</p>
                <p>Customer</p>
                <p>Lorem Ipsum is simply dummy text of the printing
                and industry. Lorem Ipsum has been the industry.</p>
        </div>      
        </div>
        </div>
    </div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

html, body {
    height: 100%;
}

.container {
        height: 100%;
        background: url(bg.jpg);
        min-width: 100%;
        background-size: 100%;
        font-family: sans-serif;
}

.content {
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(16,21,26,.9);
    width: 100%;
}

.inner {
    position: absolute;
  left: 50%;
  top: 40%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

}

.inner h1 {
    color: #3170a8;
    text-align: center;
}

.inner h1 span {
    color: #ee8129;
}

.main-block {
    margin-top: 50px;
}

.testimonial-block-1 {
    float: left;
    max-width: 364px;
    background-color: #fff;
    min-height: 100px;
    margin-right: 45px;
    position:relative;
  z-index:100;
}


.testimonial-block-1::after,
.testimonial-block-2::after {
        position: absolute;
    top: 25%;
    left: -20px;
    content: '';
    width: 0;
    height: 0;
    border-right: solid 20px rgb(255,255,255);
    border-bottom: solid 20px transparent;
    border-top: solid 20px transparent;
    z-index:2;
}

.testimonial-block-1 img {
    position:relative;
    right:150px;
}

.testimonial-block-2 img,
.testimonial-block-1 img{
    position:relative;
    right:150px;
    max-width: 107px;
    height: 106px;
}

.testimonial-block-2 {
    float: right;
    max-width: 364px;
    background-color: #fff;
    min-height: 100px;
    position:relative;
    left:160px;
  z-index:100;
}

.testimonial-block-1 p:nth-child(3),
.testimonial-block-2 p:nth-child(3) {
    border-bottom:1px dashed #222;

}

试试这个：

*{
填充：0；
保证金：0；
框大小：边框框；
}
html，
身体{
身高：100%；
}
.集装箱{
身高：100%；
背景：url（bg.jpg）；
最小宽度：100%；
背景大小：100%；
字体系列：无衬线；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（16,21,26,9）；
宽度：100%；
}
.内部{
位置：绝对位置；
左：50%；
最高：40%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.内部h1{
颜色：#3170a8；
文本对齐：居中；
}
.内部h1跨度{
颜色：#ee8129；
}
.主楼{
边缘顶部：50px；
}
.证明-block-1{
浮动：左；
最大宽度：364px；
背景色：#fff；
最小高度：100px；
右边距：45像素；
位置：相对位置；
z指数：100；
}
.证明-block-1：：之后，
.证明-block-2：：之后{
位置：绝对位置；
最高：25%；
左：-20px；
内容：''；
宽度：0；
身高：0；
右边框：实心20px rgb（255、255、255）；
边框底部：实心20px透明；
边框顶部：实心20px透明；
z指数：2；
}
.鉴定-block-1 img{
位置：相对位置；
右：150px；
}
.鉴定-block-2 img，
.鉴定-block-1 img{
位置：绝对位置；
左：-150px；
最大宽度：107px；
高度：106px；
}
.鉴定-block-2{
浮动：对；
最大宽度：364px；
背景色：#fff；
最小高度：100px；
位置：相对位置；
左：160像素；
z指数：100；
}
.第N名儿童（3名）的鉴定书-block-1，
.第2组第N名儿童（3）{
边框底部：1px虚线#222；
}

客户怎么说
-斯塔西娅·特罗里奥

顾客

Lorem Ipsum只是印刷和工业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者

-大卫·索尔

顾客

Lorem Ipsum只是印刷和工业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者

试试这个：

*{
填充：0；
保证金：0；
框大小：边框框；
}
html，
身体{
身高：100%；
}
.集装箱{
身高：100%；
背景：url（bg.jpg）；
最小宽度：100%；
背景大小：100%；
字体系列：无衬线；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（16,21,26,9）；
宽度：100%；
}
.内部{
位置：绝对位置；
左：50%；
最高：40%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.内部h1{
颜色：#3170a8；
文本对齐：居中；
}
.内部h1跨度{
颜色：#ee8129；
}
.主楼{
边缘顶部：50px；
}
.证明-block-1{
浮动：左；
最大宽度：364px；
背景色：#fff；
最小高度：100px；
右边距：45像素；
位置：相对位置；
z指数：100；
}
.证明-block-1：：之后，
.证明-block-2：：之后{
位置：绝对位置；
最高：25%；
左：-20px；
内容：''；
宽度：0；
身高：0；
右边框：实心20px rgb（255、255、255）；
边框底部：实心20px透明；
边框顶部：实心20px透明；
z指数：2；
}
.鉴定-block-1 img{
位置：相对位置；
右：150px；
}
.鉴定-block-2 img，
.鉴定-block-1 img{
位置：绝对位置；
左：-150px；
最大宽度：107px；
高度：106px；
}
.鉴定-block-2{
浮动：对；
最大宽度：364px；
背景色：#fff；
最小高度：100px；
位置：相对位置；
左：160像素；
z指数：100；
}
.第N名儿童（3名）的鉴定书-block-1，
.第2组第N名儿童（3）{
边框底部：1px虚线#222；
}

客户怎么说
-斯塔西娅·特罗里奥

顾客

Lorem Ipsum只是印刷和工业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者

-大卫·索尔

顾客

Lorem Ipsum只是印刷和工业的虚拟文本。Lorem Ipsum一直是该行业的佼佼者

将其用于图像，否则（如果使用

位置：相对

，无论设置如何），它们通常占用的空间将保留在容器中（即空的）：

 position:absolute;
left: -150px;

并在

测试块下方创建
边距底部
：


*{
填充：0；
保证金：0；
框大小：边框框；
}
html，正文{
身高：100%；
}
.集装箱{
身高：100%；
背景：url（bg.jpg）；
最小宽度：100%；
背景大小：100%；
字体系列：无衬线；
}
.内容{
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
背景色：rgba（16,21,26,9）；
宽度：100%；
}
.内部{
位置：绝对位置；
左：50%；
最高：40%；
-webkit转换：翻译（-50%，-50%）；
转换：翻译（-50%，-50%）；
}
.内部h1{
颜色：#3170a8；
文本对齐：居中；
}
.内部h1跨度{
颜色：#ee8129；
}
.主楼{
边缘顶部：50px；
}
.证明-block-1{
浮动：左；
最大宽度：364px；
背景色：#fff；
最小高度：100px；
右边距：45像素；
位置：相对位置；
z指数：100；
}
.鉴定-block-1，
.鉴定-block-2{
边缘底部：30px；
}
.证明-block-1：：之后，
.证明-block-2：：之后{
位置：绝对位置；
最高：25%；
左：-20px；
内容：''；
宽度：0；
身高：0；
右边框：实心20px rgb（255255）；
边框底部：实心20px透明；
边框顶部：实心20px透明；
z指数：2；
}
.鉴定-block-2 img，
.鉴定-block-1 img{
P
<div class="container">
    <div class="content">
        <div class="inner">
            <h1><span>What</span> Clients Says</h1>
            <div class="main-block">

                <div class="chat-container align-start" >
                    <div class="row">
                        <div>
                            <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH" alt="">
                        </div>
                        <div class="testimonial-block">
                            <p>- Staciya Trollio</p>
                            <p>Customer</p>
                            <p>Lorem Ipsum is simply dummy text of the printing
                                and industry. Lorem Ipsum has been the industry.</p>
                        </div>
                    </div>

                </div>
                <div class="chat-container align-center" >
                    <div class="row">
                        <div>
                            <img class="img" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTLdI6QE_lvzsCy_6VTsikYLz0iPFnWSv2vbGVzbwgQA8OlEbpH">
                        </div>
                        <div class="testimonial-block">
                            <p>- David Soul</p>
                            <p>Customer</p>
                            <p>Lorem Ipsum is simply dummy text of the printing
                                and industry. Lorem Ipsum has been the industry.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

* {
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

html, body {
    height: 100%;
}

.container {
        height: 100%;
        background: url(bg.jpg);
        min-width: 100%;
        background-size: 100%;
        font-family: sans-serif;
}

.content {
  width: 100%;
  height: 100%;
    background-color: rgba(16,21,26,.9);

}

.inner {
  width: 100%;
}

.inner h1 {
    color: #3170a8;
    text-align: center;
}

.inner h1 span {
    color: #ee8129;
}

.main-block {
    margin-top: 50px;
}

.chat-container{
  display:flex;
  flex-wrap:wrap
}

.row{
  display:flex;
  -webkit-box-orient: horizontal;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.align-start{
  justify-content: flex-start;
}
.align-center{
  justify-content: center;
}

.img{
    max-width: 107px;
    height: 106px;
}

.testimonial-block {
  width:290px;
  margin-left:43px;
    //float: left;
    max-width: 364px;
    background-color: #fff;
    min-height: 100px;
    //margin-right: 45px;
    position:relative;
  z-index:100;
}

.testimonial-block::after {
        position: absolute;
    top: 25%;
    left: -20px;
    content: '';
    width: 0;
    height: 0;
    border-right: solid 20px rgb(255,255,255);
    border-bottom: solid 20px transparent;
    border-top: solid 20px transparent;
    z-index:2;
}

.testimonial-block-1 img {
    position:relative;
    right:150px;
}


.testimonial-block p:nth-child(3) {
    border-bottom:1px dashed #222;

}