Ein href, der sich darauf auswirkt, wie Bilder angezeigt werden

Question

Die vier kleineren Bilder sollten in einem 2: 2 Raster sein und das größere Bild sollte die gleiche Breite wie zwei der kleineren Bilder haben.

Es funktioniert alles ohne Hinzufügen einer href-Verknüpfung. Sobald ich einen Link hinzufüge, werden sie in einen Link auf der linken Seite der Seite eingefügt.

Dies ist ein Link zu meinem HTML & CSS. enter code herehttps://jsfiddle.net/67soh1s3/

Answer 1

Sie können Sie den Code zu diesem

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

ändern

Answer 2

Dies liegt daran, display:flex behandelt <a></a> als Unter Behälter ist.

Verwenden Sie stattdessen display:block oder display:inline-block.

Answer 3

Die Prozentangabe für die Bildgröße ist nicht der beste Weg, um sich vor Problemen und Problemen des Browsers zu schützen. Sobald Sie die genaue Pixelgröße eingestellt haben, funktioniert es wieder.