Programming/Html & Css

[Css] width 50%인 2개의 inline-block 요소가 있을 때 2번째 줄이 생기는 현상

momo02 2018. 10. 2. 16:02
반응형

display : inline-block 인 div 2개가 있고, 각각  width 50%을 주었을때 한줄로 표시되어야하는데 (전체 width는 100%이므로)

하나의 div가 두번째 줄로 내려가는 현상이 발생됨 


이는 display : inline-block 이 html의 공백(white-space)을 고려하기 때문!


<div id="col1">content</div><div id="col2">content</div>

이런식으로 div 사이의 공백을 제거하면 한줄로 표출된다. 



출처 : https://stackoverflow.com/questions/6871996/two-inline-block-width-50-elements-wrap-to-second-line

반응형