Внутренняя обивка в галерее изображений - PullRequest
Новая
       18

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

0 голосов
/ 19 ноября 2010

Итак, у меня есть функция галереи, которая просто показывает изображения в сетке.В настоящее время я использую 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 содержит изображение с вычисленной шириной 90px и отступом 10px вправо.Но вместо этого они должны иметь ширину 92,5 пикселя и быть равномерно распределенными.

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

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

Ответы [ 3 ]

1 голос
/ 19 ноября 2010

Вы также можете добавить контейнер div в div tumbs, который содержит все теги div, и дать этому контейнеру отрицательное поле, чтобы компенсировать отступы по краям div большого пальца, не очень хорошее решение, но оно работает во всех браузерахдаже тот, который рифмуется с интернетом 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>
1 голос
/ 19 ноября 2010

Хорошо, так что самое простое исправление, которое я вижу, это использование всего лишь 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

0 голосов
/ 19 ноября 2010

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

Прежде всего, я бы просто установил класс для изображения напрямую ... не нужно иметь контейнер для каждого изображения. Я также думаю, что '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>

и т.д ...

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

    .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
    }

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

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

...