私のフロートに何か問題がありますか？左：CSS

Question

私がやっているウェブサイトのフラグをデザインしようとしています。デザインはフラグの一番下の部分です。それらは（予想）しかし、私はそれらをフロートするとき、彼らはボックスの内部のテキストに縮小します、どのように私はこれを修正することができますか？ここに私のコードです：私は十分にあなたの質問を理解していれば

#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>

最後に、それはこれらの

Answer 1

ようになるはずです、あなたはdisplay: table;を使用して試みることができます。

また、IDは一意であると想定されているため、代わりにクラスを使用する必要があります。 フラグ要素にh1の代わりにspanを使用しました。IEがdisplay: inline-block;を使用することを許可していない可能性があります。サポートしているバージョンによって異なります。

#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>