html - 影响图像显示方式的 href

Question

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

这一切都可以在不添加 href 链接的情况下进行。只要我添加一个链接，他们就会在页面左侧放置一个链接。

这是指向我的 HTML 和 CSS 的链接。在此输入代码 https://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>