前提・実現したいこと
CSSで横並びを整えたいです。
デスクトップ程の横幅の広いものですと綺麗に整うのですが(画像1枚目)、画面幅を狭めていくと本来画像2枚目のようにしたいのですが3枚目のように崩れてしまいます。
解決策を教えていただけたら幸いです。よろしくお願いいたします。
【1枚目】
【2枚目】
【3枚目】
該当のソースコード
HTML
1<div class="container-fluid"> 2 <div id="announcement" class="row"> 3 <i class="far fa-comment-dots fa-2x"></i> 4 <span class="announce">今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。</span> 5 <div class="close"> 6 <i id="close" class="fas fa-times"></i> 7 </div> 8 </div> 9</div>
CSS
1#announcement { 2 width: 100%; 3 padding: 8px 15px; 4 margin: 0; 5 background-color: #c2e4e7; 6 z-index: 2; 7 position: fixed; 8} 9.fa-comment-dots { 10 color: #58b5bf; 11 display: block; 12 float: left; 13 margin-left: auto; 14} 15.announce { 16 display: left; 17 padding: 0!important; 18 font-size: 14px; 19 color: #484848; 20 margin: auto 0 auto 1rem; 21 text-align: center; 22} 23.close { 24 margin-left: auto; 25 color: #007a87; 26 cursor: pointer; 27} 28.fa-times { 29 font-size: 16px; 30}
試したこと
floatやflexで整えようにもうまくいきませんでした。
table-cellを利用した場合画面幅が狭いときはうまくいったのですが、逆に広くするとmarginや文字の高さが思うように効きませんでした。
補足情報(FW/ツールのバージョンなど)
HTML5,CSS3,Bootstrap4