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

insert images in 7 by 3 grid view

本文关键字：插入 图像 视图 网格      更新时间：2023-09-26

我试图把图像在一个简单的7 × 3表/网格视图。

但是我没有得到想要的结果…也许我看错地方了。

我不想创建一个查看器或任何东西。

只是显示图像在7 × 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>
....

有什么模板我可以快速下载和使用它只是把我的图像在它。

我有图像…我只是想让它们在一个干净的表格视图中对齐然后截屏。

如果你不想处理表格，你可以把你的图像放在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/

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

当然你可以使用一些更有语义的类名，而不是float和cf

相关文章：