0

我正在尝试将图像放在一个简单的 7 X 3 表格/网格视图中。

但我没有得到想要的结果。可能我看错了地方。

我不想创建查看器或任何东西..

只需在 7 X 3 网格视图中显示图像..

.floated_img
{
    margin-left: 10px
    width:140px; /* you can use % */
    height: auto;

}

<div class="floated_img">
    <img src="Picture1.png" alt="Some image">

</div>
<div class="floated_img">
    <img src="Picture2.png" alt="Another image">

</div>
....

有没有我可以快速下载并使用它来将我的图像放入其中的模板。

我有图像..我只想将它们对齐在一个干净的表格视图中，然后对其进行屏幕截图..

4

2 回答 2

1

如果您不想处理表格，可以将图像放入LI：

ul {
    line-height: 0;
    font-size: 0;
}
li {
    display: inline-block;
    width: 14.28%; /* 100%/7 */
}
li img {
    display: inline-block;
    max-width: 100%;
}

http://jsfiddle.net/NnrEv/

于 2013-03-08T21:15:13.240 回答
1

如果您正在寻找浮动解决方案，请查看此http://jsfiddle.net/fSzxb/1/

.floater {
    float:left;
    ...
}
.floater.first {clear:both;}

/*clearfix*/
.cf:before,.cf:after {content: " "; display: table;}
.cf:after {clear: both;}
.cf {*zoom: 1;}

和你的 html

<div class="cf">
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater first"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

当然你可以使用更多语义化的类名，而不是 floater 和 cf

于 2013-03-08T21:20:29.220 回答