Как установить свойства границы для строк, созданных с помощью плавающих элементов, используя CSS?

Question

У меня есть внутренний контейнер div.Теперь в этом галерее div (с установленной шириной = 800 пикселей) размещено множество миниатюр размером 100x100.Миниатюры извлекаются из базы данных, и количество миниатюр может варьироваться в зависимости от используемого запроса.Кроме того, для каждой из миниатюр установлено значение «float: left» в галерее div.

Теперь вопрос в том, что в каждой строке размещено по 8 миниатюр, а в запросе создано 3 таких строки.Могу ли я дать дизайн нижней границы для этих строк?

По сути, вопрос в том, могу ли я указать свойства границ для строк, которые создаются плавающими элементами в пределах установленной ширины.

Спасибо!

Answer 1

Почему бы не сделать фон родительского div цветом, который вы хотите, а затем сделать фон миниатюры белым без полей слева / справа, но с полями внизу / вверху. Убедитесь, что вокруг каждого эскиза достаточно подкладки, чтобы было достаточно белого. Тогда вы получите красивую сетку с горизонтально появляющимися рядами.

Answer 2

Мой вклад:

<ul>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
    <li>
        <img src="" alt=""/>
    </li>
</ul>

ul { width:500px; }
img {
    width:50px;
    height:50px;
}
li {
    float:left;
    border-bottom: 1px solid grey;
    padding: 5px 5px 0;
}

Live: http://jsfiddle.net/Bduxm/5/

Answer 3

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

ответы, которые у вас есть до сих пор, предполагают, что вы подсчитываете минимальное / максимальное количество выбранных изображений и переносите до 8 в содержащий элемент ... тогда этому содержащему элементу может быть дана граница ... однако я прочитал ваш вопрос, число может отличатьсяв зависимости от запроса, можете ли вы добавить в запрос что-нибудь, чтобы обернуть до восьми элементов в каждой строке?

---

добавлено: вы, вероятно, могли бы использовать повторяющееся фоновое изображение на контейнере с горизонтальными линиями с интервалом около 100 пикселей, затем выделите изображения, чтобы оставить место для отображения линии / границ

Answer 4

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

<div id="container">
    <div class="imageWrapper">
                <span class="fakeRowBorder">clever, huh?   ;-)</span>
                <img src="somesrc" /> 
    </div>
    <div class="imageWrapper">
                <span class="fakeRowBorder">clever, huh?   ;-)</span>
                <img src="somesrc" /> 
    </div>

    ... [etc.]

</div>  

А это CSS:

#container{position:relative;width:400px;}
img{width:50px;height:50px;outline:1px dotted green}
.imageWrapper{float:left;position:static;margin-bottom:30px;}
.fakeRowBorder{position:absolute;left:40px;right:40px;margin-top:55px;border-bottom:1px solid blue;text-align:center;font-size:9px}

Пока .imageWrappers расположены статическое (по умолчанию), то абсолютно позиционированные .fakeRowBorders будут использовать #container в качестве опорной сетки для любых свойств позиционирования (сверху, справа, внизу или слева). Если вы не указываете верх или низ на этих поддельных границах, то они рассчитываются в соответствии с тем, как они были бы, если бы они были расположены нормально (вместо того, чтобы считать 0 по умолчанию, как можно подумать) - и это хитрость: указать " свойства left и right для каждого из них, но поля top и bottom не указываются.

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

Проверьте, как это работает здесь: http://jsfiddle.net/5S6j9/3/

Редакция

clairesuzy указала, что решение не работает в IE, поэтому я пересмотрел его, включая добавление в display: block к фиктивной границе, как она предложила.

Кроме того (частично для того, чтобы похвастаться), я добавил немного текста по центру на границе строки и перенес его с левого и правого краев контейнера #container, чтобы продемонстрировать, как он отображается, по-видимому, независимо от отдельных изображений.

Answer 5

хм .. я думал о моем собственном вопросе ... и вот моя быстрая мысль (я еще не закодировал, чтобы подтвердить) -

Я полагаю, если для элемента контейнера задано фоновое изображение, скажем, с высотой 200 пикселей (в зависимости от вычисленной высоты эскиза, оно может варьироваться) и тонкой линией в 1 пиксель в нижней части этого изображения (для подделки border), мы могли бы повторить как x, так и y, чтобы на этом изображении установилась граница (граница для нижней части каждой строки).

как это?!

код psuedo для того, что, я думаю, может работать -

#container
{
width:1000px; height:auto; margin:0; padding:0;
background-image:url('image-of-height-and-width-100px-each-and-a-thin-line-at-bottom.png');
repeat:x; repeat:y;
}

.thumbnails{
float:left; width:80px; height:80px;
}

как насчет этого ?! ребята, серьезно спасибо за предложения.

Answer 6

Использование таблиц ...

<table id="container" style="width:800px">
<tr style="border-bottom:1px solid black">
<td class="thumbnail">thumbnail</td>
...
</tr>
...
</table>

CSS:

.thumbnail { width: 100px; }