답변 3개 / 댓글 5개
채택된 답변
+20 포인트
이미지가 inline 엘리먼트라 line height의 영향을 받기때문에 그래요. 이미지에 Display:block 속성을 줘보세요.
<div style="display: inline-block; width: 200px;">
<img style="float: left;" />
<img style="float: left;" />
<img style="float: left;" />
<img style="float: left;" />
<img style="float: left;" />
<div style="clear:both;"></div>
</div>
답변에 대한 댓글 3개
다른 페이지는 그냥 됬는데 이건 왜 이런지 이해가 안가네요.
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.
<body>
<div id="wrap">
<div id="num1"><img src="m1.jpg" width="210" height="40"/><img src="m1.jpg" width="210" height="40"></div>
<div id="num3"></div>
<div id="num2"></div>
</div>
</body>
그렇게 하나하나 스타일을 지정해주는 수밖에 없는건가요?
아래가 소스입니다.
<body>
<div id="wrap">
<div id="num1"><img src="m1.jpg" width="210" height="40"/><img src="m1.jpg" width="210" height="40"></div>
<div id="num3"></div>
<div id="num2"></div>
</div>
</body>
하나하나 스타일 지정 안하셔도 됩니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요
<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
ID나 class를 이용하시면 됩니다.
다른 페이지는 스타일이 먹힌거고 저부분은 스타일이 안먹혔나보네요
<style>
#num_1 img{
float: left;
width: 210px;
height: 40px;
}
</style>
윗 방식으로 하면 num1 아이디 안에 있는 모든 img를 float: left; width: 210px; height: 40px 로 하는 겁니다.
띄워쓰기가 들어간겁니다.
붙이고 싶다면
<img /><img /> 이런식으로 붙여서 표현 해야하는데 그럼 곤란하니까
요소에 float: left를 쓰시고
마지막에 <div style="clear : both;"></div>
를 사용하시면 원하는 결과물이 나올겁니다.
답변을 작성하려면 로그인이 필요합니다.