SNS profile 숙제 중 질문있습니다.

[Eun-Gil Cho]

개인 공부를 위해서, 부트스트랩은 안쓰고 다시 진행해보고 있고요.

 

=> 맨 오른쪽에 저렇게 왼쪽 정렬을 먹여야 하는데,

 

=> 현재 이런식으로 나옵니다. 오른쪽 정렬은 또 잘 먹습니다.

=> 문제를 분석해보니까, "서울 마포구", "신입" 등을 담고 있는 p 태그의 크기들이 담고 있는 글자에 따라 크기가 제각각이라서 그런데요. 문제를 해결해보려고,  p 태그 위에 div로 감싸서 그 안에서 왼쪽 정렬도 시도 해봤는데 소용이 없네요.

 

어떻게 요구 사항과 같이 왼쪽으로 예쁘게 정렬 할 수있을까요??

 

질문 코드 링크

https://codepen.io/uscgil0127/pen/oNpOxvy

[codingapple]

글자들 사이 가운데 div 지우고 flex grow도 지워봅시다

그냥 가로 2등분만 하면 됩니다 

[Eun-Gil Cho]

말씀하신대로 글자들 사이에 div.empty 지우고, flex-grow 값도 다 없애줬는데요. 여전히, 똑같은 문제가 남게 됩니다.

 

 "서울 마포구", "신입" 등을 담고 있는 p 태그의 크기들이 담고 있는 글자에 따라 크기가 제각각이라서, 왼쪽 정렬은 margin-left 속성으로 강제적으로 밀어주는 것말고는 방법이 안 보이는데요. ( 물론, margin-left로 밀어버리면, 레이아웃 크기가 달라지면, 문제가 생겨서 좋은 방법은 아닌 것같습니다. )

제가 무엇을 놓치고 있는 걸까요??

 

"질문 코드 링크"에 알려주신 부분 반영해서, 코드 수정해놨습니다 🙂

[codingapple]

Location

서울 마포구

둘다 width : 50%씩 주면 될듯요 

[글쓴이]

글