Авторасширение и Автоширинк div?

Question

У меня отображаются строки с фотографиями одинакового размера. Если у вас недостаточно фотографий в строке, фотография должна увеличиться в ширину, чтобы занять все пространство.Там может быть 3 внутренних или 4 внутренних блока.

// CSS Section

    .cont {
    position : absolute;
    background : #E4EDF7;
    border : 1px solid grey;
    height: 200px;
    width:400px;
    }   

    .ibox {
    float: left;
    background : green;
    margin: 5px;
    border: 1px solid grey;
    height: 50px;
    width: 100px;   
    }

// HTML Markup

    <div class="cont"> 
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
        <div class="ibox"></div>
    </div>

Answer 1

Brains911 высказал мнение о том, что путаница в том, что вы на самом деле хотите. Я интерпретировал вашу «фотографию» как 1 (последнюю) фотографию, увеличивающуюся по ширине, что является оригинальным ответом ниже. Однако, если вы хотите, чтобы «фотографии» (множественное число, все 3) расширились, то есть ответ CSS3, который я добавил ниже.

Оригинальный ответ (CSS2: только последнее фото увеличивается)

Добавьте это ниже вашего ibox css:

.ibox:first-child + .ibox + .ibox:last-child {
   width: 210px; /* 2 x width + 2 x margin */
}

Он нацелится только на ibox и изменит ширину, если есть 3 вместо 4. См. Скрипку , где мне пришлось изменить width вашего cont чтобы приспособить свои поля, но вы должны понять.

Дополнительный ответ (CSS3: все 3 фотографии раскрываются)

Измените стандартную ширину в определении .ibox на 3 фотографии ( в моем примере: скрипка Я использовал 137px), затем добавьте этот CSS для Сценарий 4 фото:

.ibox:nth-last-of-type(4),
.ibox:nth-last-of-type(4) ~ .ibox {
    width: 100px;
 }

Отсчитывается в обратном направлении от конца и, если их 4, запускает стиль для 4 вместо значения по умолчанию 3.

Answer 2

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

Так что .. не зная точного количества .ibox divs (3 или 4), нет простого / надежного способа добиться этого с помощью только css (насколько я знаю), если вы не можете использовать некоторые css3 - Гибкая коробочная модель CSS 3 , которая может быть недоступна, если вам требуется совместимость с более старыми браузерами.

С небольшим количеством jquery это будет довольно быстро, например

var container = $('.cont'), 
    iboxCount = container.find('.ibox').length,
    photoWidth = container.width()/iboxCount; //TODO: adjust for margin/padding

container.find('.ibox').css('width',photoWidth); 

Надеюсь, это поможет.

Answer 3

Хорошо, я немного поэкспериментировал и нашел быстрое решение вашей проблемы с авторазмером:

.cont { 
    position : absolute; 
    background : #E4EDF7; 
    border : 1px solid grey; 
    height: 200px; 
    width:400px; 
        display:table;
    }    

в классе "cont" просто добавьте последний бит "display: table;"и внешнее поле должно изменить размер добавляемого содержимого.