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