Внутреннее заполнение в галерее изображений

Итак, у меня есть эта функция галереи, которая просто показывает изображения в сетке. В настоящее время я использую TABLE, но я хочу перейти на CSS, чтобы использовать ширину 100% для изображений, чтобы они хорошо масштабировались.

Верно, поэтому лучше всего объяснить, посмотрев на эту страницу: http://sandman.net/test/css_gallery.php< /а>

Синяя рамка находится на внешнем DIV, а изображения хранятся в слоях DIV. Код выглядит примерно так:

<div class="thumbs">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
</div>

И так далее. И таблицы стилей в настоящее время таковы:

<style type='text/css'>
    .thumbs {
        width: 400px;
        border: 1px solid blue;
        overflow: hidden;
    }
    .thumb {
        width: 25%;
        float: left;
    }
    .thumb > .inner {
        padding: 0 10px 10px 0;
    }
</style>

ТАК - к моей проблеме. Как видите, отступ в настоящее время составляет 10 пикселей, как и должно быть. Но не на четвертой колонке!! По сути, я хочу, чтобы изображения были четырьмя столбцами с тремя столбцами пробелов между ними. Как и сейчас, каждый .thumb содержит изображение с рассчитанной шириной 90 пикселей и отступом 10 пикселей справа. Но вместо этого они должны быть шириной 92,5 пикселя и располагаться через равные промежутки.

Потому что одна проблема заключается в том, что я не могу установить разные поля для первых трех и четвертого столбцов, так как тогда изображение шириной 100% изменит размер, что нежелательно. Таким образом, отступы должны каким-то образом применяться единообразно ко всем изображениям.

Итак, у вас есть хороший способ сделать это? :)


html css width gallery css-float
person Sandman    schedule 19.11.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы также можете добавить контейнер div в div tumbs, который содержит все div tumbs, и дать этому контейнеру отрицательное поле, чтобы компенсировать отступы по краям divs thumb, не очень красивое решение, но оно работает во всех браузерах, даже в этом. что рифмуется с nternet xplorer. :)

<div class="thumbs">
  <div class="container">
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
    <div class="thumb">
        <div class="inner">
            <img />
        </div>
    </div>
  </div> <!--container-->
</div>

<style type='text/css'>
    .container {
    margin: 0 -10px 0 -10px;
    }
</style>
person Bazzz    schedule 19.11.2010
comment
Хорошо, рад, что смог помочь! Обратите внимание, что я предположил, что слева и справа есть отступы, что, как указал Мэтт, неверно. Вам придется немного скорректировать отрицательное поле, чтобы мой пример соответствовал вашему коду. - person Bazzz; 19.11.2010

arrow_upward
1
arrow_downward

Итак, самое простое исправление, которое я вижу, это использовать еще 1 div и крошечную настройку CSS. Оберните div.thumbs в другой div, например:

<div class="thumbs-wrapper">
    <div class="thumbs>
        <!-- same content here as before -->
    </div>
</div>

и переместите границу с div.thumbs на новую обертку:

.thumbs-wrapper {
    border: 1px solid blue;
    overflow: hidden;
    width: 390px; /* cuts off the pesky extra padding */
}

.thumbs {
    width: 400px;
}

Остальная часть CSS неизменна. Результат: screenshot

person Matt Ball    schedule 19.11.2010
comment
Я думаю, что это практически то же самое решение, которое я представил, но ваше использует div вокруг, а не внутри, и вы скрываете переполнение. Обратите внимание, что если вы хотите обрезать отступы с обеих сторон, я думаю, вам нужно, чтобы div был 380 пикселей вместо 390 пикселей, в 2 раза на 10 пикселей меньше, чем общее количество? - person Bazzz; 19.11.2010
comment
@Bazzz: да, решения очень похожи. Обратите внимание, однако, что на исходной странице слева нет отступов, которые можно было бы обрезать. Это, и изображение показывает макет с контейнером 390px. Помните, что padding: 0 10px 10px 0; означает отсутствие заполнения сверху или слева; 10px справа и снизу. - person Matt Ball; 19.11.2010
comment
Вы правы, слева нет отступов. Я изначально неправильно прочитал. - person Bazzz; 19.11.2010

arrow_upward
0
arrow_downward

Нет смысла использовать эзотерические псевдоклассы... просто создайте свой собственный!

Прежде всего, я бы просто установил класс для изображения напрямую... не нужно иметь контейнер для каждого изображения. Я также думаю, что «margin» — более разумный выбор, чем «padding», поэтому HTML-код, который я получаю, выглядит так:

<div class="thumbs">
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
    <div class="thumb">
        <img class="inner first" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner" src="" />
    </div>
    <div class="thumb">
        <img class="inner last" src="" />
    </div>
</div>

так далее...

Я предполагаю, что ваша математика такова: (ширина 400 пикселей) — (поле 3 x 10 пикселей) = 370 пикселей / 4 столбца = 92,5 пикселя на столбец... но обычно вы не хотите работать с половина пикселя, поэтому я буду использовать 92 пикселя на столбец с общей шириной 368 пикселей после полей. Итак, поскольку вы настраиваете свои собственные классы для первого и последнего, ваша таблица стилей должна выглядеть примерно так:

    .thumbs {
        width: 398px; // 368px + 30px for margin
        border: 1px solid blue; // 1px for each side, results in a total width of 400px
        overflow: hidden;
    }
    .thumb {
        width : 92px;
        float : left;
    }
    .inner {
        width : 92px;
        margin : 0 10px 10px 10px;
    }
    .first {
        margin : 0 10px 10px 0!important; //important should make sure it overrides        .inner
    }
    .last {
        margin : 0 0 10px 10px!important; //important should make sure it overrides .inner
    }

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

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

person jlmakes    schedule 19.11.2010