影响图像显示效果的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

对图像大小使用百分比不是防止浏览器故障和问题的最佳方法。一旦你设置了精确的像素大小，它再次工作。