how to set border properties for rows created by floating elements, using css?

I've a inside container div. Now this gallery div (of set width = 800px) houses lots of thumbnails of sizes 100x100. The thumbnails are taken out from a database, and the number of thumbnails can vary based on the query used. Also, each of the thumbnails are set to "float:left" within the gallery div.

Now the question is, assuming 8 thumbnails get placed in each row开发者_如何转开发, and assuming that 3 such rows got created by the query, can I give a border-bottom design to these rows?

Basically the question is, can i specify the border properties for the rows that are created by floating elements within a set width.

Thanks!

---

My contribution:

<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/

---

As far as I read your question.. then no, it's not possible as it stands.. your pseudo three "rows" are not actually wrapped in individual containers so there is nothing to put a border on

the answers you have so far assume you count the min/max number of images selected and wrap up to 8 in a containing element.. this containing element could then be given the border.. however I read from your question the number may vary depending on a query, could you add something to the query to wrap up to eight elements in each row?

---

added: you could probably use a repeating background image on the container with horizontal lines about 100px apart, then margin the images to leave space to show the line/borders

---

Why not make the parent div's background the color of the border you want, then make the thumbnail's background white with no margin to the left/right, but a margin at the bottom/top. Make sure there is enough padding around each thumbnail so there is enough white. Then you get a nice grid with horizontally appearing rows.

---

You could fake it, though you'd need a little more markup. With this 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>  

And this 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}

As long as the .imageWrappers are positioned static (default) then the absolutely positioned .fakeRowBorders will use #container as their reference grid for any positioning properties (top, right, bottom, or left). If you don't specify top or bottom on those fake borders, then they are calculated per how they would be were they positioned normally (rather than taking 0 as a default, as one might think) -- and that's the trick: specify "left" and "right" properties for each one, but leave "top" and "bottom" un-specified.

Adjust top and bottom padding or margin on the image and the fake borders to play with the spacing.

Check out how it works here: http://jsfiddle.net/5S6j9/3/

Revision

clairesuzy pointed out that the solution didn't work in IE, so I've revised it, including adding in display:block to the fake border, as she suggested.

Also, (partly just to show off) I added some text centered in the row border, and brought it in from the left and right edges of the #container to demostrate how it displays apparently independently of the individual images.

---

Use tables...

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

CSS:

.thumbnail { width: 100px; }

---

hmm.. i've been thinking about MY own question.. and here's my quick thought on it (i've not yet coded to confirm) -

i guess, if the container element is set with a background-image with say a height of 200px (depending on the thumbnail height calc, it could vary) and a thin 1px line at the bottom of this image (for faking the border), we could do a repeat in both x and y, so that this image will do the border (border for the bottom of each row) setting.

how's that?!

psuedo code for what i think might work -

#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;
}

how about that?! guys, seriously thanks for the suggestions.