이미지에 margin 값 적용시, 레이아웃을 벗어나는 현상에 대해 궁금합니다.
하린
쇼핑몰에 li로 상품목록을 작업하고 있는데요
기본적으로 각각의 li 넓이 25%로 지정되어있어 위 첨부사진의 1번 진열방식 처럼 진열이 되더라구요. (25%로 나누었기때문에
첫이미지와 마지막이미지에도 여백이 생김.)
저는 2번 진열방식 처럼 첫번째 이미지와, 4번째이미지가 각각,레이아웃의 시작점과 끝부분으로 맞추려고 했습니다.
몇가지 방법이 있겠지만 저는 25% 로 지정된 li 사이즈를 없애고, 아래첨부사진과 같이 margin-right 값을 주어서
첫번째와 마지막이 레이아웃 선이 일치하도록 작업하였습니다.
그런데 이렇게 적용했을때, 추가된 MARGIN-RIGHT 값으로 인해,레이아웃의 넓이의 벽에 부딧히며,이로인해.
마지막 이미지가 줄바꿈으로 내려가더라구요. 그래서 UL의 값을 레이아웃보다 큰 값을 주니 정상적으로 나오더라구요.
그런데 여기서 문제는,
실제로눈에는 보이지 않지만 UL 의값 (혹은 margin-right 값이 추가된만큼 레이아웃의 우측으로 공간을 차지하고
있기에) 때문에, 브라우져를 축소했을때 사이트의 레이아웃 끝에서가 아닌 margin이 추가되거나, 혹은 레이아웃의 넓이보다
벗어난 ul 사이즈의공간에서 부터 가로스크롤바가 생깁니다.
이경우 어떻게 해결해야 되나요? 이런방식으로 작업을 하는것이 아닌지 궁금합니다.다른방법으로는margin-left로 값을주고li:first-child 를 이용해 첫이미지의 margin값은 0 으로 잡아서 작업하니 정상으로
보여졌었지만, 이경우에는 둘째줄, 세째줄 상품에는 적용되지 않고 오직 첫번째줄 첫번째 상품에만 적용되어
생략했습니다. ( ㅠㅠ 어렵네요)
도움좀 부탁드리겠습니다.
-
찬놀
감사합니다. 말씀해주신 div 와 overflow 로 해결하였습니다.
좋은정보 얻고 갑니다. 즐거운하루 되시고 행복하세요~^^ -
하늘
ul을 div로 감싸고 해당 div에 overflow:hidden 을 주세요.
li 에 margin-left:40px;
ul을 margin-left:-40px; 주시면 됩니다. -
승아
first-class 는 첫번째줄 첫번째 상품에만 적용이 되더라구요,
쇼핑몰이기때문에 두번째 세번째에도 목록이 있는데 이것은 왜 첫번째 줄에만
적용이되는지 궁금합니다. 댓글 감사합니다.^^ 좋은하루되세요 -
sin
ul { overflow:hidden; }
ul li { margin-left:40px; }
ul li:first-child { margin-left:0px; }
이런 방식으로 해결이 가능합니다.
하위 브라우저를 생각하신다면, 첫번째 li에만 클래스부여해서 margin-left:0px;하는 방식이 있습니다. -
꽃여름
감사합니다. ul에 div 를 감싼후, overflow 로 해결하였습니다.
이곳에서 항상 많은 정보 얻고 가네요. 좋은하루 되세요^^ -
라이브라
ul사이즈를 40px 더해주고
그 ul에 div로 40px뺀값으로 사이즈 지정 그리고 overflow:hidden;