Geek asks and answers

How to set border properties for strings created by floating elements using css?

I have an inner div container. Now this gallery div (of the set width = 800 pixels) contains a lot of thumbnails 100x100 in size. Thumbnails are removed from the database, and the number of thumbnails may vary depending on the query used. In addition, each of the thumbnails is set in the "float: left" field in the gallery div.

Now the question arises: are 8 sketches supposed to be placed on each line, and if we assume that three such lines were created as a result of the query, can I provide a bottom edge diagram for these lines?

Basically the question arises: can I specify border properties for strings created by floating elements within the specified width.

Thank!

+3
source share
6 answers

You could fake it, although you'll need a bit more markup. Using 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 .imageWrappers are static (by default), absolutely positioned .fakeRowBorders will use #container as a reference grid for any positioning properties (top, right, bottom, or left). If you don’t point above or below on these fake borders, then they will be calculated on how they would be if they were located normally (instead of accepting 0 by default, as one might think), and that trick : Specify "left" and "right" for each of them, but leave the "upper" and "lower" undefined.

.

, : http://jsfiddle.net/5S6j9/3/

Revision

clairesuzy , IE, , : , .

, ( ), , , #container, , , -, .

+1

.. , , . "" ,

, , , / 8 .. ​​.. , - , ?

: , , 100 , , , /

+1

:

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

+1

div , , /, /. , , . .

+1

...

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

CSS

.thumbnail { width: 100px; }
0

.. .. ( ) -

I think if the container element is set with a background image with a height of 200 pixels (depending on the height of the sketch, it can change) and a thin 1px line at the bottom of this image (to fake the border), we could do a repetition in both x and y so that this image performs border adjustment (border for the bottom of each line).

like this?!

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 this ?! guys, thank you very much for the suggestions.

0
source

More articles:


All Articles