div 콘텐츠 정렬 설정 문제.

Question

페이지에 정보 표시 줄을 추가하고 싶습니다. 3 개의 div가 수평으로 정렬되어 있으며 모든 콘텐츠가 현재 왼쪽에 떠 있습니다. 센터 div 정렬 중심의 내용과 오른쪽 div의 오른쪽 정렬 내용을 만들려고 노력하고 있지만 아무것도 시도하지 않습니다.

나는 text-align:center#quickshop에 #delivery에와 text-align:right을 추가 시도하고 또한 #quickshop에 float:right을 시도했지만 그들은 전혀 영향을주지 않습니다.

HTML/CSS : 지구에 어디 https://jsfiddle.net/qafru72o/2/

: 문제의 실제 예를 볼 수 있도록 내가 여기에 바이올린을 설정 한

#info-bar { 
 
    height: 46px; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    width: 82%; 
 
} 
 
.info { 
 
    float: left; 
 
    width: 37.5%; 
 
    margin: 0; 
 
    padding: 9px 0; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
} 
 
#quickquotes.info { 
 
    width: 28.5%; 
 
} 
 
#quickshop.info { 
 
    width: 34%; 
 
} 
 
#container i { 
 
    font-size: 34px; 
 
    color: #a6d120; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#container i:before { 
 
    position: relative; 
 
    top: 0px; 
 
} 
 
.icon-quote:before { content: url("http://placehold.it/35x27"); } 
 
.icon-delivery:before { content: url("http://placehold.it/35x27"); } 
 
.icon-quickshop:before { content: url("http://placehold.it/35x27"); } 
 

 
#container .text-area { 
 
    display: inline-block; 
 
    text-align: left; 
 
    margin-left: 0px; 
 
    color: #1e3e57; 
 
    letter-spacing: 0.07em; 
 
    font-weight: bolder; 
 
    text-transform: uppercase; 
 
    font-size: 0.8em; 
 
}

<div id="info-bar"> 
 
    <div id="container"> 
 
    <div id="quickquotes" class="info"> 
 
     <i class="icon-quote"></i> 
 
     <div class="text-area"> 
 
     Quick Quote Fast Response</div> 
 
    </div> 
 

 
    <div id="delivery" class="info"> 
 
     <i class="icon-delivery"></i> 
 
     <div class="text-area"> 
 
     Free UK Delivery on Orders Over £100</div> 
 
    </div> 
 

 
    <div id="quickshop" class="info"> 
 
     <i class="icon-quickshop"></i> 
 
     <div class="text-area"> 
 
     Quick Shop Search Product Codes</div> 
 
    </div> 
 
    </div> 
 
</div>

내가 여기서 잘못 가고있어?

는

Answer 1

#info-bar{ 
 
height: 46px; 
 
} 
 
#container{ 
 
margin:0 auto; 
 
width:82%; 
 
} 
 
.info{ 
 
float:left; 
 
width:37.5%; 
 
margin:0; 
 
padding: 9px 0; 
 
display:flex; 
 
flex-wrap: nowrap; 
 
align-items: center; 
 
} 
 
#quickquotes.info{ 
 
width:28.5%; 
 
justify-content: flex-start; 
 
} 
 
#quickshop.info{ 
 
width:34%; 
 
justify-content: flex-end; 
 
} 
 
#delivery.info{ 
 
justify-content: center; 
 
} 
 
#container i { 
 
font-size: 34px; 
 
color: #a6d120; 
 
display: inline-block; 
 
vertical-align: middle; 
 
} 
 

 
#container i:before { 
 
    position:relative; 
 
    top:0px; 
 
} 
 
.icon-quote:before {content: url("http://placehold.it/35x27");} 
 
.icon-delivery:before {content: url("http://placehold.it/35x27");} 
 
.icon-quickshop:before {content: url("http://placehold.it/35x27");} 
 

 
#container .text-area { 
 
display: inline-block; 
 
margin-left: 0px; 
 
color:#1e3e57; 
 
letter-spacing:0.07em; 
 
font-weight:bolder; 
 
text-transform:uppercase; 
 
font-size:0.8em; 
 
}

<div id="info-bar"> 
 
<div id="container"> 
 
<div id="quickquotes" class="info"> 
 
<i class="icon-quote"></i> 
 
<div class="text-area"> 
 
Quick Quote Fast Response</div> 
 
</div> 
 

 
<div id="delivery" class="info"> 
 
<i class="icon-delivery"></i> 
 
<div class="text-area"> 
 
Free UK Delivery on Orders Over £100</div> 
 
</div> 
 

 
<div id="quickshop" class="info"> 
 
<i class="icon-quickshop"></i> 
 
<div class="text-area"> 
 
Quick Shop Search Product Codes</div> 
 
</div> 
 
</div> 
 
</div>

이 당신이 필요로하는 무엇인가?