이미지가 아래로 내려갑니다..
본문
<div class="container text-center">
<h3>외 과</h3><br>
<!--<div class="row" style="display: block">-->
<div class="col-sm-6 zzz" id="start">
<img class="map" id="Image-Maps-Com-image-maps-2018-02-04-224418" src="<?php echo G5_THEME_URL?>/kmle/img/kmle1_2.png" border="0" width="399" height="442" orgWidth="399" orgHeight="442" usemap="#image-maps-2018-02-04-224418" alt="" class="btn-toggle"/>
<map name="image-maps-2018-02-04-224418" id="ImageMapsCom-image-maps-2018-02-04-224418">
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="54,65,102,105" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="51,245,97,276" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="54,292,100,322" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="312,311,344,359" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="#aaa" shape="rect" coords="281,23,363,62" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
</map>
<div class="well well-sm"><a href="#circulatory" class="btn-toggle" >
순환기 </a></div>
<div class="well well-sm"><a href="#digestive" class="btn-toggle" >
소화기 </a></div>
<div class="well well-sm"><a href="#respiratory" class="btn-toggle" >
호흡기 </a></div>
<div class="well well-sm"><a href="#kidney" class="btn-toggle" >
신장 </a></div>
<div class="well well-sm"><a href="#blood" class="btn-toggle" >
혈액 </a> </div>
<div class="well well-sm"><a href="#infection" class="btn-toggle" >
감염 </a></div>
<div class="well well-sm"><a href="#rheumatism" class="btn-toggle" >
류마티스 </a></div>
<div class="well well-sm"><a href="#allergy" class="btn-toggle" >
알레르기 </a></div>
</div>
이렇게 div를 구성하였는데
이미지 div 옆에 바로 다른 div 목록이 나타났으면 하는데 아래쪽에 위치하네요...
어떻게 고쳐야지 그림 옆에 나타날 수 있을까요..?
답변 1
float 속성을 써야하는데.. 다른 문제가 발생할 수 있으니 아래처럼 해보세요
<div class="container text-center">
<h3>외 과</h3><br>
<!--<div class="row" style="display: block">-->
<div class="col-sm-6 zzz" id="start">
<div style="display:inline-block;">
<img class="map" id="Image-Maps-Com-image-maps-2018-02-04-224418" src="<?php echo G5_THEME_URL?>/kmle/img/kmle1_2.png" border="0" width="399" height="442" orgWidth="399" orgHeight="442" usemap="#image-maps-2018-02-04-224418" alt="" class="btn-toggle"/>
<map name="image-maps-2018-02-04-224418" id="ImageMapsCom-image-maps-2018-02-04-224418">
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="54,65,102,105" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="51,245,97,276" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="54,292,100,322" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="http://www.naver.com/" shape="rect" coords="312,311,344,359" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
<area alt="" title="" href="#aaa" shape="rect" coords="281,23,363,62" style="outline:none;" target="_self" onfocus="this.blur()" class="btn-toggle" />
</map>
</div>
<div style="display:inline-block;">
<div class="well well-sm"><a href="#circulatory" class="btn-toggle" >
순환기 </a></div>
<div class="well well-sm"><a href="#digestive" class="btn-toggle" >
소화기 </a></div>
<div class="well well-sm"><a href="#respiratory" class="btn-toggle" >
호흡기 </a></div>
<div class="well well-sm"><a href="#kidney" class="btn-toggle" >
신장 </a></div>
<div class="well well-sm"><a href="#blood" class="btn-toggle" >
혈액 </a> </div>
<div class="well well-sm"><a href="#infection" class="btn-toggle" >
감염 </a></div>
<div class="well well-sm"><a href="#rheumatism" class="btn-toggle" >
류마티스 </a></div>
<div class="well well-sm"><a href="#allergy" class="btn-toggle" >
알레르기 </a></div>
</div>
</div>
