Question

我正在尝试将图像放在一个简单的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>
....

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

我有图片..我只是想在一张干净的桌面视图中对齐它们，然后只拍一张它的屏幕截图..

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

Answer 2

如果您正在寻找浮动解决方案，请查看此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>

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

在7乘3网格视图中插入图像

2 个答案: