너무어려웡
502
2017-05-23 14:46:02
2
317

css(?) 관련 질문입니다!


      =============>     


화면 출력을 이런식으로 한줄에 두개씩 출력 되게 해주고 싶은데요...

-jsp-

<c:forEach var="a" items="${src}">
  <div class="box">
    <img src="a.src">
  </div>
</c:forEach>


-css-

article #box{
	width: 100px;
	padding: 10px;
	border-radius: 10px;
	margin: 10px;
}


컨트롤러에서 src 목록을 받아서 순서대로 출력 해주는식인데요...

css을 이리저리 해봐도 안되는데 어떻게 하면될까요 ㅠㅠ?

0
0
  • 답변 2

  • shaffron
    3k
    2017-05-23 15:03:33 작성 2017-05-23 15:30:47 수정됨

    <div> 태그는 일반적으로 display:block 으로 처리됩니다.

    라인 하나를 다 먹어버리기 때문에 <div> 한개당 1개의 라인을 먹게 됩니다. 


    <span>은 자신이 차지하는 영역만 딱 먹습니다. 

    <div> 처럼 컨텐츠 크기에 관계없이 한 라인을 다 먹는게 아닌 자신의 컨텐츠에 따라 길이를 차지합니다.


    <div>와 <span>을 섞에놓은 개념이 <div style="display:inline-block">인데 <div>를 inline-block으로 처리하면 <div>태그인데도 자신의 컨텐츠에 따라 가변 길이를 가지게 됩니다.


    따라서 두가지 방법이 있겠네요

    1. <div>를 <span>으로 바꾸기

    2. - <div>를 유지하되 .box 속성에 display:inline-block 추가하기 

        - 새로운 <div>로 box 클래스를 2개씩 감싸기   

    <div>
       <div class="box">
           <img src="a.png" />
       </div>
       <div class="box">
           <img src="a.png" />
       </div>
    </div>
    <div>
       <div class="box">
           <img src="a.png" />
       </div>
       <div class="box">
           <img src="a.png" />
       </div>
    </div>

    그리고 CSS가 잘못되어있네요
    #은 ID를 나타냅니다. ID는 HTML 문서 하나당 유일하게 존재해야 합니다.
    클래스는 . 으로 나타냅니다. 
    아래와 같이 바꾸셔야 적용됩니다.

    .box{
       ~~~
       ~~~
    }

    0
  • 너무어려웡
    502
    2017-05-23 15:18:36

    오오... span의 경우는 내용이 완전 뒤죽박죽 돼버렸는데

    인라인 블락 주니깐 바로 원하는대로 됐습니다 ㅠㅠ 감사합니다!

    1
  • 로그인을 하시면 답변을 등록할 수 있습니다.