1278px 너비로 볼 때 전체 화면 너비의 76 %로 설정된 페이지에 정보 표시 줄이 표시됩니다 (Macbook의 기본 크기).이 div는 회전 목마 바로 위에 놓 이도록 중앙에 있어야합니다. 정보 표시 줄에는 3 개의 div가 있으며 각 div에는 아이콘과 텍스트가 포함되어 있습니다. 내가 가진 문제는 화면 너비가 줄어들면 텍스트가 아이콘 아래로 떨어지는 반면 전체 콘텐츠의 크기가 줄어들고 전체 간격을 유지하여 항상 아래의 회전 목마와 정렬된다는 것입니다. 화면이 스마트 폰 크기에 도달하면 정보 표시 줄이 세로로 쌓입니다. (미디어 쿼리 크기는 아직 설정되지 않았지만 여기에 사용 된 예제 크기) HTML
<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>
CSS
#info-bar{
background:#fff;
}
#container{
margin-right: auto;
margin-left: auto;
width:76%;
}
.info{
float:left;
width:38.5%;
margin:0;
padding: 9px 0;
font-size:0.4em;
}
#quickquotes.info{
width:30.5%;
}
#quickshop.info{
width:31%;
}
#container i {
font-size: 34px;
color: #a6d120;
display: inline-block;
vertical-align: middle;
}
.icon-quote:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quote.png");
}
.icon-delivery:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-delivery.png");
}
.icon-quickshop:before {
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quickshop.png");
}
#container .text-area {
display: inline-block;
vertical-align: middle;
text-align: left;
margin-left: 0px;
color:#1e3e57;
letter-spacing:0.07em;
font-weight:bolder;
text-transform:uppercase;
font-size:1.1em;
}
@media only screen and (max-width: 40em) {
.info,#quickquotes.info,#quickshop.info {
float:none;
width:100%;
margin-bottom:5px
}
}
현재 사용되는 CSS 및 HTML 코드를 보여주는 바이올린을 설정했습니다. (참고로 jsfiddle의 단일 행에 표시되도록 실제로 사용하는 것보다 훨씬 작은 글꼴 크기를 추가해야했습니다.
Fiddle은 https://jsfiddle.net/4auh8zn5/1/ 에서 찾을 수 있습니다.
flexbox로 해결할 수 있습니다.
CSS의 .info를 다음과 같이 변경하십시오.
.info{
float:left;
width:38.5%;
margin:0;
padding: 9px 0;
font-size:0.4em;
display:flex;
flex-wrap: nowrap;
align-items: center;
}
아이콘을 더 잘 배치하려면 다음 코드를 추가 할 수도 있습니다.
#container i:before {
position:relative;
top:4px;
}
jsfiddle 여기 : https://jsfiddle.net/4auh8zn5/2/
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다