CSS - 내 코드에 따라 크롬

Question

와 정렬 잘못된 :

: 이것은 매우 작은 해상도의 화면이

입니다 : 이것은 정상적인 해상도에서 화면이

<div style="width: 100%; height: 400px; border-bottom: 1px; text-align: center"> 
    <div style="float: left; width: 33%;">test</div> 
    <div style="display: inline-block; width: 33%;">test</div> 
    <div style="float: right; width: 33%;">test</div> 
</div> 

입니다

왜 해상도가 아주 작은 지 모두 33 %가 아닐까요? 어떻게 해결할 수 있습니까?

Answer 1

너는 이와 같은 것을 원한다 - 맞습니까? 모든 해상도에서 작동합니다.

jsFiddle demo here - 동일한 마크 업을 사용합니다.

참고 : inline-block 요소는 2 픽셀의 여백을 생성하므로 각 요소의 너비는 33 %가 될 수 없습니다. 공백을 제거하거나 너비에 30 %와 같은 것을 사용하십시오.

위 예제에서 공백을 제거하기 만하면됩니다. 또는 margin:-2px;을 설정할 수 있습니다.

Answer 2

중 하나 width: 33% div의 float: left의 세 가지가 (당신이 원하는하지만 중간 일뿐만 아니라 float를 필요로하는 경우 float: right로 마지막을 떠날 수) 또는 전부 수레를 제거하고 그들에게 모든 display: inline-block;를 제공합니다 제공합니다.

Answer 3

왜 중간 div가 display: inline-block;으로 설정되어 있는지 확실하지 않습니다. div는 상속되는 display: block;입니다. 다음 CSS/HTML을 시도해보십시오. 내 로컬 컴퓨터에서 작동합니다.

<style type="text/css"> 

.wrap { 
    width: 100%; 
    height: 400px; 
    border-bottom: 1px; 
    text-align: center; 
} 

.wrap div { 
    float: left; 
    width: 33%; 
    margin: 0 auto; 
    padding: 0; 
} 

.left { 
    background-color: red; 
} 

.middle { 
    background-color: blue; 
} 

.right { 
    background-color: green; 
} 

.clearThis { 
    width: 100%; 
    height: 0; 
    float: none; 
    margin: 0 auto; 
    padding: 0; 
    clear:both; 
} 

</style> 


<div class="wrap"> 
    <div class="left">test</div> 
    <div class="middle">test</div> 
    <div class="right">test</div> 
    <div class="clearThis"></div> 
</div>