Question

我有一个内部容器div。现在这个画廊div（设置宽度= 800px）包含大量尺寸为100x100的缩略图。缩略图从数据库中取出，缩略图的数量可以根据使用的查询而变化。此外，每个缩略图在gallery div中设置为“float：left”。

现在的问题是，假设每行放置了8个缩略图，并假设查询创建了3个这样的行，我可以为这些行提供边框底设计吗？

基本上问题是，我可以指定由设置宽度内的浮动元素创建的行的边框属性。

谢谢！

Answer 1

你可以假装它，虽然你需要更多的标记。使用此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视为） - 这就是诀窍：指定“为每一个留下“和”右“属性，但不指定”top“和”bottom“。

调整图像上的顶部和底部填充或边距以及假边框以使用间距进行播放。

查看它的工作原理： http://jsfiddle.net/5S6j9/3/

<强>修订

clairesuzy指出该解决方案在IE中不起作用，因此我对其进行了修改，包括将display：block添加到假边框，正如她所建议的那样。

另外，（部分只是为了展示）我在行边框中添加了一些文本，并从#container的左右边缘引入，以说明它如何独立于各个图像显示。

Answer 2

据我读到你的问题..然后不，它不可能，因为它代表..你的伪三“行”实际上并没有包裹在单独的容器中所以没有任何东西可以放置边框

到目前为止你所拥有的答案假设你计算所选图像的最小/最大数量，并在一个包含的元素中包含8个...这个包含元素然后可以给出边框..但是我从你的问题中读取了这个数字可能会因查询而异，您是否可以在查询中添加一些内容以包含每行中的八个元素？

补充说：你可以在容器上使用重复的背景图像，水平线相距约100px，然后边缘图像留出空间以显示线条/边框

Answer 3

我的贡献：

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

直播：http://jsfiddle.net/Bduxm/5/

Answer 4

为什么不将父div的背景设置为所需边框的颜色，然后使缩略图的背景为白色，左/右没有边距，但底部/顶部有边距。确保每个缩略图周围都有足够的填充，以便有足够的白色。然后你得到一个有水平出现的行的漂亮网格。

Answer 5

使用表格 ...

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

CSS：

.thumbnail { width: 100px; }

Answer 6

嗯..我一直在想我自己的问题..这是我对它的快速思考（我还没有编码确认） -

我想，如果容器元素设置的背景图像的高度为200px（取决于缩略图高度计算，它可能会有所不同），并且在此图像的底部有一条薄的1px线（用于伪造border），我们可以在x和y中重复，这样这个图像就会做边框（每行底部的边框）设置。

怎么样？！

我认为可行的伪代码 -

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

那怎么样？！伙计们，非常感谢你的建议。

如何使用css为浮动元素创建的行设置边框属性？

6 个答案: