Ist etwas falsch mit meinem Schwimmer: links in CSS

Question

Ich versuche, eine Flagge für eine Website, die ich tue, und das Design ist die Teile an der Unterseite der Flagge, sie stapeln, wenn ich nicht schweben sie (erwartet), aber wenn ich sie schwebe, schrumpfen sie auf den Text innerhalb der Box, Wie kann ich das beheben? Hier ist mein Code:

#flag1{ 
 
    max-width:400px; 
 
    max-height:1000px; 
 
    margin:0 auto; 
 
} 
 
#mainflag{ 
 
    background-color:#BA0500; 
 
    max-width:400px; 
 
    max-height:1000px; 
 
    position:relative; 
 
    height:auto; 
 
    margin: 0 auto; 
 
    text-align:center; 
 
    padding:5px; 
 
    color:white; 
 
} 
 
#flagdesign1{ 
 
    background-color:#BA0500; 
 
    max-width:100px; 
 
    position:relative; 
 
    max-height:50px; 
 
    color:#BA0500; 
 
    margin-top:-21px; 
 
    margin-right:20px; 
 
}

<div id="flag1"> 
 
    <div id="mainflag"> 
 
    <h1>Flag</h1> 
 
    </div> 
 
    <div id="flagdesign1"> 
 
     <h1>A</h1> 
 
    </div> 
 
    <div id="flagdesign1"> 
 
     <h1>A</h1> 
 
    </div> 
 
</div>

Am Ende ist es so etwas wie diese

Answer 1

aussehen sollte Wenn ich Ihre Frage gut verstehen, könnten Sie versuchen display: table; verwenden.

Außerdem sollte eine ID eindeutig sein, stattdessen sollten Sie Klassen verwenden. Ich habe auch span anstelle von h1 für das Flag-Element verwendet, da IE möglicherweise keine Verwendung von display: inline-block; zulassen, abhängig von der Version, die Sie unterstützen.

#flag1{ 
 
    max-width:400px; 
 
    max-height:1000px; 
 
    margin:0 auto; 
 
} 
 
#mainflag{ 
 
    background-color:#BA0500; 
 
    max-width:400px; 
 
    max-height:1000px; 
 
    position:relative; 
 
    height:auto; 
 
    margin: 0 auto; 
 
    text-align:center; 
 
    padding:5px; 
 
    color:white; 
 
} 
 

 
.bottomFlag { 
 
    display: table; 
 
    width: 100%; 
 
} 
 

 
.bottomFlagElem { 
 
    display: table-cell; 
 
} 
 

 
.bottomFlagElem.center { 
 
    text-align: center; 
 
} 
 
.bottomFlagElem.left { 
 
    text-align: left; 
 
} 
 
.bottomFlagElem.right { 
 
    text-align: right; 
 
} 
 

 
.bottomFlagElem span { 
 
    display: inline-block; 
 
    width: 100%; 
 
    background-color:#BA0500; 
 
    max-width:100px; 
 
    position:relative; 
 
    min-height:30px; 
 
    max-height:50px; 
 
    color:#BA0500; 
 
    margin: 0; 
 
}

<div id="flag1"> 
 
    <div id="mainflag"> 
 
    <h1>Flag</h1> 
 
    </div> 
 
    <div class="bottomFlag"> 
 
    <div class="bottomFlagElem left"> 
 
     <span>A</span> 
 
    </div> 
 
    <div class="bottomFlagElem center"> 
 
     <span>A</span> 
 
    </div> 
 
    <div class="bottomFlagElem right"> 
 
     <span>A</span> 
 
    </div> 
 
    </div> 
 
</div>