[CSS] position: absolute / 부모 요소 높이 안잡히는 경우 / 자식 요소 겹칠 때 (야매)해결방법

오늘도 폭풍 작업을 하던 중.... 맞닥뜨린 css 문제...

A와 B는 한 div 안에 묶여있어야 하면서 A는 가운데 정렬, B는 왼쪽 정렬이 되어야하는데

문제는 B의 시작점이 가운데 정렬된 A의 시작점과 동일해야한다는 것이었다.

 

제일 첫번째 방법은 B에 absolute를 먹이는 방법이었다. 하지만 적용하니, 붕 뜨면서 A가 B의 height를 인지하지 못했다.

position이 absolute가 되면 float를 적용한 것처럼 공중에 붕 떠서 부모 요소가 자식 요소의 height를 인지 못한다고 한다.

float를 사용하는 경우에는, clear: both를 이용하여 해결하는 방법이 있었지만,

float를 쓰지 않았기도 했고 clear를 적용해도 내가 원하는 방식으로 결과물이 나오지 않았다.

 

찾아보니 A에 고정된 높이값을 주면 해결된다고는 하지만.... 나는 B의 height에 따라 유동적이어야만 했다.

absolute와 유동적인 height가 공존할 수 없다는 포스팅을 봐서 어떻게 해결해야할 지 살짝 멘붕이었다가..

https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=dwttdt&logNo=90195498290 

position absolute 사용 시 상위 부모 태그 height 0 해결

 

..

약간 야매로 해결했다.

 

B의 width를 A의 width보다 작게 잡고, white-space: nowrap을 주었다.

 

나의 경우에 B의 width가 A의 width보다 커지면서,

B의 시작점이 A의 왼쪽에 있어 부자연스럽게 보이는게 문제였다.

 

그래서 B의 width를 A의 width보다 작게 해서, A보다 길어지지 않게 방지하고

B의 width가 작아서 글이 제대로 안적힐테니까 nowrap을 이용해서 글자가 넘칠 수 있게 했다.

 

 

내가 생각해도 너무 야매라서... 다른 방법이 있었으면 좋겠다...