Распространение изображений равномерно и горизонтально в Div с помощью CSS

Мне сложно найти конкретную информацию для моего дела. Я хотел бы распространять 3 эскиза изображений через div 940px, чтобы соответствовать остальной части моего контента. До сих пор я получал изображения горизонтально, но интервал отключен, и все сдвинуто влево.

Вот мой CSS:

#thumbs {   
  width: 940px;
  margin-top:90px;
  margin-left: auto; 
  margin-right: auto;
}

Мой HTML:

<div id="thumbs">
  <a id="single_image" href="/dev/images/1.png">
    <img src="/dev/images/thumb1.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/2.png">
    <img src="/dev/images/thumb2.png" alt=""/>
  </a>
  <a id="single_image" href="/dev/images/3.png">
    <img src="/dev/images/thumb3.png" alt=""/>
  </a>
</div>

Примеры изображений

Что у меня есть:

То, что я пытаюсь достичь:

Ваша помощь очень ценится.

Ответы

Ответ 1

Используйте технику, показанную в моем ответе здесь: Ширина жидкости с равноотстоящими DIVs

Вот он с вашим кодом: http://jsfiddle.net/thirtydot/JTcGZ/

CSS

#thumbs {   
    width: 540px;
    margin-top:90px;
    margin-left: auto; 
    margin-right: auto;

     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
#thumbs a {
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

HTML:

<div id="thumbs">
    <a id="single_image1" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image2" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <a id="single_image3" href="#"><img src="http://dummyimage.com/150x150/444/fff" alt=""/></a>
    <span class="stretch"></span>
</div>

Ответ 2

Существует чистое решение:

http://radiatingstar.com/distribute-divs-images-equaly-line

#container {
    text-align: justify;
}
#container > div {
    width: 100px; /* Declare your value. Can be in relative units. */
    display: inline-block;
    vertical-align: top;
}
#container:after {
    content: "";
    width: 100%;
    display: inline-block;
}

Ответ 3

Ответ очень прост, просто используйте:

.container {
    display: flex;
    justify-content:space-between;
}

Что все!

Ответ 4

Попробуйте добавить

положение: относительная; выравнивания текста: центр;

в #thumbs, и установите ширину и поле для (или img) в #thumbs.

Что-то вроде этого, проверяя различные значения:

#thumbs a {
  width: 25%;
  margin: 0 4%;
  text-align:center;
}

Ответ 5

Недостатком text-align: justify; является то, что вы должны иметь место между двумя элементами встроенного блока, иначе эти два элемента будут придерживаться друг друга.

вы можете проверить это поведение здесь: http://jsfiddle.net/JTcGZ/1552/

Новый современный способ добиться этого - использовать flex.

#thumbs {   
    display: flex;
    justify-content: space-between // flex-start | flex-end | center | space-around;
    align-items: stretch // flex-start | flex-end | center | baseline;
}
#thumbs a {
    display: inline-block;
}

Также вы можете определить процентную ширину в современных браузерах:

#thumbs a {
    width: calc((100% / 3) - 10px);
}

пожалуйста, зайдите на эту страницу для более подробной информации о гибком макете:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Ответ 6

почему бы не использовать теги div div div в качестве контейнера с верхним заполнением 90px, а другие внутренние элементы используют простой класс (а не идентификатор, чтобы его можно было повторно использовать), что все float осталось. таким образом, они горизонтально выравниваются идеально, а также контейнер для упаковки обеспечивает маржу, которую вы ищете. вы также будете использовать значительно меньше кода для выполнения того, что вы хотите.