Блог

JSFiddle: http://jsfiddle.net/M6g85/2/

Краткие сведения

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

Проблема в том, что левое и правое изображения нужно привязывать влево и вправо, в то время как среднее плавает в центре. Все с равными полями между ними.

Я создал еще один класс под названием «artWrapper», это делается для того, чтобы текст заголовка соответствовал изображениям.

То, что я пробовал

Я попытался установить для левой и правой позиций «artWrappers» значение «absolute» и использовать left: 0, right: 0, но тогда в средней позиции нет ничего, с чем можно было бы плавать.

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

Что я пытаюсь сделать

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

Текст заголовка должен оставаться на одной строке над изображением, а высота изображения все та же, ширина будет отличаться.

** Код**

HTML:

 <div id="wrapper">
    <div class="col33">
        <div class="artWrapper left">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper center">
                <h2>Image 2</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper right">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>
 

CSS:

 #wrapper {
    width:700px;
    border:1px solid;
}
.col33 {
    width:33.33%;
    float:left;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
}
.left {
    position:relative;
    left:0;
}
.center {
    position:relative;
    margin:0 auto;
}
.right {
    position:relative;
    right:0;
}
.clearfix {
    clear:both;
}
 

Вот один из способов создания этого макета с использованием встроенных блоков.

Ваш HTML хорош как есть.

Попробуйте следующий CSS:

 #wrapper {
    width:700px;
    border:1px solid;
    text-align: justify;
    line-height: 0;
}
.col33 {
    max-height: 521px;
    display: inline-block;
    line-height: 1;
}
.artWrapper {
}
.artWrapper img {
    display: block;
}
/* You could replace .clearfix element with a pseudo-element */
.clearfix {
    vertical-align: top;
    display: inline-block;
    width: 100%;
    height: 0;
}
 

В родительском контейнере #wrapper установите text-align: justify и line-height: 0 .

Для .col33 элементов установите display: inline-block и line-height: 1 (или какое-то подходящее значение, основанное на вашем типографском дизайне).

Применитесь display: block к .artWrapper img , чтобы предотвратить дополнительное пустое пространство внизу изображений.

В вашем .clearfix элементе установите display: inline-block , vertical-align: top , width: 100% и height: 0 .

Для того text-align: justify , чтобы работать, вам нужно как минимум две строки встроенных элементов, в этом случае изображения образуют одну строку и .clearfix образуют вторую. Установив ширину .clearfix равной 100%, она занимает всю строку, поэтому гарантирует, что всегда будет вторая строка, если у вас очень узкие изображения. vertical-align: top И height: 0 избавляется от любого дополнительного пробела из-за начала встроенного поля по умолчанию.

Важно установить line-height: 0 на оболочку, а затем сбросить ее для .col33 дочерних элементов, иначе вы получите некоторое остаточное пустое пространство между нижней границей и содержимым.

Смотрите демонстрацию по адресу: http://jsfiddle.net/audetwebdesign/QM9Ub /

Если я понимаю вопрос, предложите переделанное решение, основанное на вашем примере Codepen DEMO, конечно, это не идеальное решение, но я думаю о том, что вы хотите реализовать

HTML

 <div id="wrapper">
    <div class="col33">
        <div class="artWrapper left">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper center">
                <h2>Image 2</h2>

            <img src="http://placehold.it/550x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper right">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>
 

CSS

 #wrapper {
    width:100%;
    border:1px solid;
  text-align:center;
}
.col33 {
    /*width:33.33%;*/
    /*float:left;*/
  display:inline-block;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
  width: 100%;
  height: auto;
}
.left {
    position:relative;
    left:0;
}
.center {
    position:relative;
    margin:0 auto;
}
.right {
    position:relative;
    right:0;
}
.clearfix {
    clear:both;
}
 

Для этого вам не нужны классы left, right и center. Просто добавьте выравнивание текста: по центру в .artWrapper

 #wrapper {
    width:100%;
    border:1px solid;
}
.col33 {
    width:33.33%;
    float:left;
    margin:0 auto;
    max-height:521px;
}
.artWrapper {
    display:block;
    text-align:center;
}
 

HTML

 <div id="wrapper">
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 1</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 2</h2>

            <img src="http://placehold.it/400x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="col33">
        <div class="artWrapper">
                <h2>Image 3</h2>

            <img src="http://placehold.it/200x486" alt="Krays" class="" />
        </div>
    </div>
    <div class="clearfix"></div>
</div>
 

Используя свойство table и table-cell, вы можете добиться этого. Обновите свой CSS, как показано ниже.

 #wrapper {
width:700px;
border:1px solid;
display:table;
}
.col33 {
display:table-cell;
max-height:521px;
width:auto;
}
.artWrapper {
 display:block;
}

.clearfix {
clear:both;
}
.left
{
text-align:left;
 }
.right
{
text-align:right;
}
.center
{
text-align:center;
}
 

Демонстрация скрипки