Картинная галерея без границ?

Question

Я пытался сделать галерею изображений для своего портфолио, но хочу, чтобы они были образами без границ и рядом друг с другом как по горизонтали, так и по вертикали. К сожалению, все мои попытки не увенчались успехом.

.portfolio { 
 
    height: 1250px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: #CF9; 
 
} 
 
#thumbs { 
 
    width: 20%; 
 
    height: 50px; 
 
    color: #090; 
 
    float: left; 
 
    font-size: 0px; 
 
}

<div class="portfolio"> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
    <div id="thumbs"> 
 
    <a href="http"> 
 
     <img src="thumb.png"> 
 
    </a> 
 
    </div> 
 
</div>

http://www.adhemas.com/ вроде того, что я пытаюсь достичь, за исключением моих изображений одинакового размера (хотя я бы не возражаю, как сделать их разные размеры, но все еще сложено)

Answer 1

Идентификаторы элементов должны быть уникальными в пределах всего документа. Если у вас несколько элементов с одинаковым идентификатором, ваш HTML недопустим, что может привести к тому, что ваша веб-страница перестанет работать по назначению.

Источник: Can multiple different HTML elements have the same ID if they're different types?

Я предлагаю вам use classes instead, которые поддерживают наличие нескольких элементов с одинаковым классом.

Дайте все ваши элементы class из thumbs вместо id. Затем вы можете использовать .thumbs вместо #thumbs в своем правиле CSS, чтобы стилизовать ваши элементы.

Answer 2

Первое, что нужно исправить - это идентификатор. Вы не можете повторно использовать id в html.

Далее необходимо установить a и img, которые должны быть ограничены внутри элемента .thumb.

Что-то вроде следующего

.portfolio { 
 
    height: 1250px; 
 
    width: 80%; 
 
    margin: 0 auto; 
 
    background-color: #CF9; 
 
} 
 
.thumbs { 
 
    width: 20%; 
 
    color: #090; 
 
    float: left; 
 
    font-size: 0px; 
 
} 
 
.thumbs a {display:block;} 
 
.thumbs img{width:100%;}

<div class="portfolio"> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/1"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/2"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/3"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/4"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/5"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/6"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/7"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/8"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/9"> 
 
    </a> 
 
    </div> 
 
    <div class="thumbs"> 
 
    <a href="http"> 
 
     <img src="http://lorempixel.com/500/500/cats/10"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 3

Извлечение <div> метки полностью и устанавливающего <img> CLASS (не использовать идентификаторы более чем один раз), чтобы thumbs складывает изображения хорошо рядом друг другой без полей (благодаря вашему левому поплавку). Если у меня нет причины держать <div>, я предлагаю удалить их, поскольку они как раз в пути, они также являются элементами блока, которые идут против встроенного макета, за которым вы после.