0

By css "flex" the outer div(s) "Video_Item" are same high = ok !

The innermost divs are in one column:

  • "Video_Screen" //all have the same size

  • "Titel_Daten" //have different height, because of the text length

  • "Video_Stat_Daten" //all have the same size

If you look at the snippet, it becomes clear that the div (s) "Video_Stat_Daten" must be aligned vertically downwards.

The code is included by another Page, beause of this there are no css positions settings.

<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,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, Arial, 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>
HWKWvL
  • 15
  • 6
  • read *all* the duplicate because it provide solution without position – Temani Afif Jan 01 '21 at 07:48
  • start by removing inline-block from `.Video_Item` to apply the duplicate trick: https://stackoverflow.com/a/48014909/8620333 – Temani Afif Jan 01 '21 at 07:50
  • @Temani Afif - (1st) thanks inline-block from `.Video_Item` removed. - (2nd) before I ask this question I have the last 3 days read & tried ALL "the duplicates" but it does everything, but not the solution I need - Can You Help Me PLEASE ? – HWKWvL Jan 01 '21 at 08:05
  • follow the link I gave you, I pointed you to the answer you need to use, simply apply the code there – Temani Afif Jan 01 '21 at 08:07
  • @Temani Afif - thanks again – HWKWvL Jan 01 '21 at 08:26

0 Answers0