안녕하세요 염치 없지만 질문 최신글 관련 질문 드립니다. 채택완료
꿈의세계
8년 전
조회 1,769
http://www.jisim.or.kr/index.php">http://www.jisim.or.kr/index.php
현제 메인에 갤러리 게시판을 하나 만들고 있는데요
근데 문제는 이미지는 정상적으로 나오는 것 같은데 아래 타이틀 바와 그리고 이미지가 옆으로 나열이 되어야 하는데 그렇게 되지 않고 아래로 떨어지는 현상 입니다.
왜 그러는 것인지 궁금 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
마르스컴퍼니
Expert
8년 전
는 기본적으로 블록 레벨 요소입니다.
블록 (block) 레벨 요소는 가로 공간 전부를 차지한다는 의미입니다.
인라인 요소로 바꾸기 위해 float 와 같은 속성을 지정해 줄 수 있습니다.
최신 이미지를 출력하는 div 태그에 float:left 와 같은 인라인 요소 변경 스타일을 지정해 주면 됩니다.
</p><p><span style="font-size: 14.6667px;"><div style="float:left"></span> </p><p><span style="font-size: 14.6667px;"> 이미지 #1</span></p><p><span style="font-size: 14.6667px;"></div></span></p><p style="font-size: 14.6667px;"><span style="font-size: 14.6667px;"><div style="float:left"></span> </p><p style="font-size: 14.6667px;"><span style="font-size: 14.6667px;"> 이미지 #2</span></p><p style="font-size: 14.6667px;"><span style="font-size: 14.6667px;"></div></span></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
꿈의세계
8년 전
댓글을 작성하려면 로그인이 필요합니다.
8년 전
알려주신 사이트에 가서 확인해보니
개발자 도구로 보시면
가로 사이즈를 넓게 차지하는것이 몇개 보입니다.
</p><p>/*-- style.css --*/</p><p>
</p><p>#latest_shop .img-thumbnail {</p><p>/* width:100%; 이것 제거*/</p><p>}</p><p>site_strap.css 의 </p><p>.<span style="font-size: 11pt;">img-thumbnail { </span></p><p>/* max-width:100% //이것 제거 를 제거하시고 */</p><p>}</p><p>
html 소스보기상에서
</p><p><div></p><p><span style="white-space:pre"> </span><a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="<a href="<a href="http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2</a>"><a href="http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2</a></a>"></p><p><span style="white-space:pre"> </span><img src="<a href="<a href="http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png</a>"><a href="http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png</a></a>" alt="" width="" height="" class="img-responsive" title=""><span style="white-space:pre"> </span><p class="m-none"></p><p><span style="white-space:pre"> </span>사진 자료<span style="white-space:pre"> </span></p></p><p><span style="white-space:pre"> </span></a></p><p><span style="white-space:pre"> </span></div></p><p>의 내용에 div에 style 부여</p><p>//다음과 같이</p><p>
</p><p><div style="float:left"></p><p><span style="white-space:pre"> </span><a class="img-thumbnail img-thumbnail-hover-icon mb-xs mr-xs" href="<a href="<a href="http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2</a>"><a href="http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/bbs/board.php?bo_table=photo&wr_id=2</a></a>"></p><p><span style="white-space:pre"> </span><img src="<a href="<a href="http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png</a>"><a href="http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png" target="_blank" rel="noopener noreferrer">http://www.jisim.or.kr/data/file/photo/thumb-2083729301_of3UuFEX_24648b4a54e942dd6f8ead9e481a7da22c15c5bf_210x210.png</a></a>" alt="" width="" height="" class="img-responsive" title=""><span style="white-space:pre"> </span><p class="m-none"></p><p><span style="white-space:pre"> </span>사진 자료<span style="white-space:pre"> </span></p></p><p><span style="white-space:pre"> </span></a></p><p><span style="white-space:pre"> </span></div></p><p>
하시면 두줄로 된게 한줄로 나옵니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
꿈의세계
8년 전
네감사합니다
제가내일해보고혹시안되먼다시문의드리도록하겠습디다좋은밤되세요
제가내일해보고혹시안되먼다시문의드리도록하겠습디다좋은밤되세요
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
제가내일해보고안되멘다시문의드리도록하겠습디다
오늘밤도좋은밤되세요정말감사드립니다