影响图像显示方式的 href

Question

四个较小的图像应位于 2 x 2 的网格中，较大的图像应与两个较小的图像填充相同的宽度。

无需添加 href 即可正常工作 link。一旦我添加 link，它们就会被放入页面左侧的 link。

这是我 HTML 和 CSS 的 link。 enter code herehttps://jsfiddle.net/67soh1s3/

Answer 1

这是因为 display:flex 将 <a></a> 视为子容器。

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

Answer 2

使用百分比表示图像大小并不是保护自己免受浏览器故障和问题影响的最佳方式。一旦你设置了精确的像素大小，它就会再次工作。

Answer 3

您可以将代码更改为此

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

影响图像显示方式的 href

a href affecting how images are displaying

html

css

image

href