• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

inline-block이 작동하지 않습니다

21.03.29 08:01 작성 조회수 147

0

알려주신대로

.cell {

display: inline-block;

width: 30%;

margin: 0 1%;

}

이렇게 작성해 보았는데요 width와 margin은 정상적으로 작동되는데 inline-block은 정상적으로 작동되지 않습니다 <div class="cell" style="display: inline-block;"> 으로 넣어봐도 세로로만 배열되지 가로로는 배열되지 않네요 어떤 점이 문제일까요?

답변 1

답변을 작성해보세요.

0

itjustbong님의 프로필

itjustbong

2021.04.02

안녕하세요,
chomongoose 님.

우선 질문 확인이 늦어서 죄송합니다.

또한 chomongoose님께서 올려주신 코드로 테스트를 해본 결과 정상적으로 작동이 됩니다.

HTML 파일에서 

<div class="row">
<div class="cell">
<img src="image/hotel.jpg">
</div>
<div class="cell">
<img src="image/hotel.jpg">
</div>
<div class="cell">
<img src="image/hotel.jpg">
</div>
</div>
<div class="row">
<div class="cell">
<img src="image/hotel.jpg">
</div>
<div class="cell">
<img src="image/hotel.jpg">
</div>
<div class="cell">
<img src="image/hotel.jpg">
</div>
</div>

와 같은 형태로 적용이 되어 있는지 확인해주시고,

만약에 그래도 적용이 안된다면,
chomongoose님의 html파일과 css파일을 요청드립니다.

또한 크롬의 '검사 도구'기능을 활용해보시면,
문제 해결에 도움이 될 것 같습니다.

https://blog.rightbrain.co.kr/?p=11693

에 관련 기능이 포스팅이 되어 있습니다.
검사도구 이외에도 다른 기능들도 포함되어 있으니, 읽어보시면 좋을 것 같습니다.

검사 도구를 활용해서 이미지 옆 공간이나, 이미지를 클릭하셔서 어떤 CSS가 적용되고 있는지 등을 파악해서 오류를 해결하실 수 있을 것 같습니다.

감사합니다.