如何让内部 div3 个中的最后一个在底部垂直对齐到外部 div - 没有在 css 中设置位置？

问题描述

通过 css "flex" 外部 div(s) "Video_Item" 是一样高 = ok ！

最里面的 div 在一列中：

• "Video_Screen" //大小相同

• "Titel_Daten" //高度不同，因为文本长度不同

• "Video_Stat_Daten" //大小相同

如果您查看代码段，很明显 div (s)“Video_Stat_Daten”必须垂直向下对齐。

该代码被另一个页面包含，因此没有 css 位置设置。

<style type="text/css">
#MAbstand {
margin-top: 100px;
margin-bottom: 100px;   
}
#Page_Mediathek {
padding-left: 100px;
display: -webkit-flex;
display: -ms-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
background-color: #086a87;
color: rgba(255,255,1);
}
.Video_Item {
display: -webkit-flex; 
display: -ms-flexBox; 
display: flex;

width: 211px;
padding: 1px;
float: left;
margin-top: 20px;
margin-left: 1px;
margin-right: 1px;
margin-bottom: 20px;
border: 1px solid #aaa;

border: 1px solid green;
vertical-align: bottom;
}
.Video_Content {
}
.Titel {
font-family: Roboto,Arial,sans-serif;
letter-spacing: normal;
word-wrap: break-word;
font-size: small;
font-weight: bold;
}
.SubTitel {
font-family: Roboto,sans-serif;
letter-spacing: normal;
word-wrap: break-word;
font-size: small;
font-weight: bold;
}
.Video_Stat_Daten {
margin-bottom: 0 !important;
font-family: Arial,Helvetica,sans-serif;
font-size: x-small;
font-weight: bold;  
}
</style>

<div id="MAbstand">
    <hr />
</div>
<div id="Page_Mediathek">

            <div class="Video_Item">
                <div class="Video_Content">
                    <div>
                        <iframe 
                          class="Wertefeld"
                          id="Video_ID_00090" 
                          width="210" 
                          height="118" 
                          src="Beispiel.mp4" 
                          frameborder="0" 
                          allowfullscreen>
                        </iframe>
                    </div>
                    <div>
                        <div class="Titel_Daten">
                            <div class="Titel">Mahlzeit Freunde 6</div>
                            <div class="SubTitel">&nbsp;</div>
                        </div>
                    </div>
                    <div class="Video_Stat_Daten">
                        <div>
                            <div>01:22:16</div>
                            <div>699&nbsp;Views</div>
                            <div>23.12.2020</div>
                        </div>
                    </div>
                </div>
            </div>
                    
                
                
        
            <div class="Video_Item">
                <div class="Video_Content">
                    <div>
                        <iframe 
                          class="Wertefeld"
                          id="Video_ID_00089" 
                          width="210" 
                          height="118" 
                          src="Beispiel.mp4" 
                          frameborder="0" 
                          allowfullscreen>
                        </iframe>
                    </div>
                    <div>
                        <div class="Titel_Daten">
                            <div class="Titel">Live Parade in Deutschland Hamburg 30.02.2021</div>
                            <div class="SubTitel">&nbsp;</div>
                        </div>
                    </div>
                    <div class="Video_Stat_Daten">
                        <div>
                            <div>01:59:44</div>
                            <div>9717&nbsp;Views</div>
                            <div>20.12.2020</div>
                        </div>
                    </div>
                </div>
            </div>
      
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）