컨테이너의 병렬 블록을 올바르게 정렬하는 방법

Question

디스플레이 블록이있는 div가 있고 인라인 블록에 다른 블록이 있습니다. 이것이 내가 가진 것입니다. 나는 디스플레이에 첫 내부 사업부를 넣어

display:inline-block case

경우 :

display:block with floating case

#container { 
    display: block; 
    width: 50%; /*Of its parent*/ 
} 

#container > div { 
    display: block; 
    width: 22%; 
    padding: 5px 1.2%; 
    float: left; 
} 

/* or 

#container > div { 
    display: inline-block; 
    width: 22%; 
    padding: 5px 1.2%; 
} 

or 

#container > div { 
    display: inline-block; 
    width: 22%; 
    padding: 5px 1.2%; 
    float: left; 
} 

*/ 

이 할 수있는 사람은 그것이 무엇인지 알려줍니다주십시오 블록을 부동 소수점 왼쪽으로,이이 잘못하고 그것을 고치는 데 도움이됩니까? 감사합니다.

Answer 1

5px 1.2% 및 22%가 정말 잘 작동하지 않습니다,

#container > div { 
    display: block; 
    width: 25%; 
    padding: 5px 1%; 
    margin: 0; 
    float: left; 
} 

#container>div { 
 
    display: block; 
 
    width: 23%; 
 
    padding: 5px 1%; 
 
    margin: 0; 
 
    float: left; 
 
    height: 100px; 
 
} 
 

 
.red{ 
 
    background: red; 
 
} 
 
.green{ 
 
    background: green; 
 
}

<div id="container"> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
    <div class="red"></div> 
 
    <div class="green"></div> 
 
</div>

Answer 2

display: flex을 사용해보세요. 부유물로 인해 문제가 발생하는 경향이 있습니다. Flex는 이러한 문제 중 일부를 수정합니다. 좋은 가이드는 여기에서 찾을 수 있습니다 : https://css-tricks.com/snippets/css/a-guide-to-flexbox/