각각 300px 인 5 개의 이미지가있는 div가 있습니다. 각면에 10px 여백이 있으면 1600px 너비로 내 div에 맞아야하지만 마지막 이미지는 다음 줄로 충돌합니다. 왜 적합하지 않습니까? 몇 번의 시행 착오 끝에 여백을 8.5px로 조정할 때 올바르게 맞지만 의미가없는 것 같습니다.? 다른 테두리, 패딩 등이 없습니다.
내 CSS는 다음과 같습니다.
#wrap {
width: 1600px;
margin: 0 auto;
background-color: red;
}
.image {
width: 300px;
margin: 8px 10px 0 10px;
vertical-align: text-top;
}
내 HTML은 다음과 같습니다.
<div id="wrap">
<div id="portfolio">
<section>
<a><img></a>
<a><img></a>
<a><img></a>
<a><img></a>
<a><img></a>
</section>
<section>
<a><img></a>
<a><img></a>
<a><img></a>
<a><img></a>
<a><img></a>
</section>
</div>
문제의 이유 :
예제 코드에서 실제로 achor 사이의 공백을 공백으로 만듭니다 (각각 4px 너비).
그래서 그냥 anchor,anchor,anchor..., 대신에 실제로 anchor,space,anchor,space...등을 표시합니다 .
해결책:
이미지 만 사용하고 (앵커 없음) 각각 사이의 공백을 제거하거나 앵커를 왼쪽으로 띄울 수 있습니다.
a { float: left; }
다음은 기능적인 JSfiddle입니다. 여기에서 <img>태그 사이의 앵커와 공백을 제거하면 플로팅 없이도 모두 같은 줄에있을 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다