이미지 리스트 라인 맞추는 법??
푸른나래
에... 요즘 자꾸 질문만 올리네요.
위 화면은 구글 검색기에서 아무 이미지나 검색해서 리스트를 출력한 화면인데요.
보시다시피 리스트 끝부분 라인이 아름답게(?) 맞춰져 있군요. 네 보기좋은 모습인데요.
제가 한번 만들어봤습니다...........구글은 inline-block을 이용했고 저는 float:left를 이용한 차이를 제외하고는
특별히 다르게 코딩한 부분은 없구요... 아무리 짱구를 굴려봐도 저 끝 라인을
저렇게 아름답게 맞출수 있을만한 방법이 떠오르질 않네요. 허허허CSS로 제어하는거 같진 않고 서버단에서 하는걸까 싶어 여러가지 방법을 동원해봤는데
결과는 시망입니다. 저런 형태는 어떻게 맞출수 있을까요?
-
아리에스
그렇더라구요. 근데 뭐.. 크게 눈에 거슬릴정도는 아닌거 같아서 저정도면 정말 이상적인 정렬이 아닌가 싶기도 해요 ㅎ
-
안찬
제가 한번해보니까 구글도 완벽하진 않더라고여~ 사이즈를 줄이다보니 어떤 딱 한 개체에 대해 높이가 제대로 안잡혀 있는 현상이~
-
새우깡
답변감사합니다... 말씀하신 부분 이것저것 실험하다가 구글에서 inline-block 처리가 되어있었다는 부분에 대해서 간과하고 있다는걸 깨달았네요. text-align:justify로 완전 간단하게 해결했습니다. 허허허. 물론 구글에서처럼 이미지 사이의 간격까지 비슷하게 조절하지는 못했지만 얼추 비슷하게는 나오네요.
말씀하신 부분은 곰곰히 따져보니 역시 스크립트에서 제어하는 부분이 맞는것 같아 이것저것 테스트해보고 있습니다. 답변 감사해요 ^^ -
은별
껍데기가 1000px이라고 하고 이미지가 4개가 나열되어 있다고 칩시다.
그럼 100짜리도 있겠고 300짜리도 있을텐데 이걸 1000에 4개가 들어가는걸 가정하고 각각의 이미지의 넓이의 합도 생각해서 비율적으로 늘려주면 되겠죠?
구글도 아마 그렇게 처리했다고 생각이 듭니다.
리스트의 최대 넓이를 넘어가는 이미지가 있을 경우 크기를 리사이징해서 줄여줬을 것이고
최소 넓이보다 작아지면 그만큼 안쪽여백을 줘서 정렬이 되게끔 했을 것이고
여러가지 복합적인