影響圖像顯示效果的href

Question

四個較小的圖像應位於一個2乘2的網格中，較大的圖像應該填充與兩個較小圖像相同的寬度。

這一切都可以在不添加href鏈接的情況下運行。只要我添加一個鏈接，然後他們將被放置在頁面左側的鏈接中。

這是我的HTML & CSS的鏈接。 enter code herehttps://jsfiddle.net/67soh1s3/

Answer 1

您可以將代碼更改此

* { 
 
    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>

Answer 2

這是因爲display:flex是對待<a></a>作爲子容器。

改爲使用display:block或display:inline-block。

Answer 3

對圖像大小使用百分比不是防止瀏覽器故障和問題的最佳方法。一旦你設置了精確的像素大小，它再次工作。