4 개의 작은 이미지는 2x2 격자 모양이어야하며 큰 이미지는 작은 이미지의 두 개와 동일한 너비를 채워야합니다.이미지 표시 방법에 영향을 미치는 href
href 링크를 추가하지 않고도 모두 작동합니다. 링크를 추가하자마자 페이지의 왼쪽 아래 링크에 삽입됩니다.
내 HTML & CSS에 대한 링크입니다. enter code herehttps://jsfiddle.net/67soh1s3/
당신이
* {
box-sizing: border-box
}
#post-template-container {
position: relative;
width: 100%;
min-height: 100%;
overflow: auto;
background-color: #404040;
}
#show-write-up-section {
position: relative;
width: 98%;
height: 100%;
padding: 1%;
margin: 1%;
background-color: #404040;
}
#title-of-show {
text-align: center;
color: #FFDD00;
}
#show-information {
text-align: center;
color: #FFFFFF;
}
#production-photo-gallery {
width: 100%;
background-color: #404040;
text-align: center
}
#production-photo-gallery ul {
width: 100%;
text-align: center;
padding: 0;
margin: 0;
}
#production-photo-gallery ul li {
width: 48%;
padding: 5%;
display: inline-block;
list-style: none
}
#production-photo-gallery ul#main-production-image li {
width: 100%;
}
#production-photo-gallery ul li img {
width: 100%;
}
#main-production-image {
width: 100%;
text-align: center;
margin: 0 auto;
}<div id="post-template-container">
<div id="show-write-up-section">
<h1 id="title-of-show">Sample Title</h1>
<p id="show-information">Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample
text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text
Sample text sample text Sample text sample text Sample text Sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample
text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text
sample text Sample text sample text Sample text sample text Sample text sample text Sample text sample text Sample text</p>
<div id="production-photo-gallery">
<ul>
<li>
<a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
<img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
</a>
</li>
<li>
<a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
<img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
</a>
</li>
<li>
<a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
<img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
</a>
</li>
<li>
<a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
<img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
</a>
</li>
</ul>
<ul id="main-production-image">
<li>
<a href="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
<img src="http://www.tigzcreative.co.uk/wp-content/uploads/Bouncers-image-2.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>display:flex는 서브 <a></a> 컨테이너로 취급되기 때문이다.
대신 display:block 또는 display:inline-block을 사용하십시오.
이미지 크기에 백분율을 사용하는 것은 브라우저의 결함 및 문제로부터 자신을 보호하는 가장 좋은 방법은 아닙니다. 정확한 픽셀 크기를 설정하면 다시 작동합니다.