Question

我试图在屏幕上放置缩略图，甚至是“填充”。这是一个说明问题的图像：

page preview

<!DOCTYPE html>
<html>
<head>
<title>Test rows</title>

<style type="text/css">

    body {
        background: #121212;
        color: #fff;
    }

    #Container {
        background: #585858;
        margin: 0 auto;
        min-width: 1024px;
        width: 85%;
        margin-top: 50px;

        text-align: justify;
        -ms-text-justify: distribute-all-lines;
        text-justify: distribute-all-lines;
    }

    #Container a {
        vertical-align: top;
        display: inline-block;
        *display: inline;
        zoom: 1;
    }

    .stretch {
        width: 100%;
        display: inline-block;
        font-size: 0;
        line-height: 0;
    }




</style>
</head>

<body>

<div id="Container">

<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<a href="#"><img src="http://dummyimage.com/200x120/444/fff" /></a>
<span class="stretch"></span>

</div>




</body>
</html>

我在stackoverflow中做了一些研究，发现了一些有用的代码，但是我遇到了一些问题。我希望图像从左到右对齐，而不是“捕捉”到容器的boders，因为当你看到图像时，我在最后一行中的图像较少。

另外我想让行之间的“垂直空间”等于图像之间的水平间距，现在我有一些像“3px”这样的垂直间距，我不确定从哪里来。如果需要，我会向js解决方案开放。谢谢

Answer 1

LIKE THIS会对你有用吗？

这是基于我建议你阅读的here on SO答案以及this one - 也是基于它的。这个证明了子元素。

HTML

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <span class="stretch"></span>
</div>

CSS

#container {

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    /* just for demo */

}

.box {
    width: 150px;
    height: 125px;
    background:#ccc;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    margin:10px;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

或者，如果不是对齐的子项目，而是希望它们从左到右对齐，请查看{{3 }，基于this fiddle

HTML

<div class="container"> <div>Box1</div> <div>Box2</div> <div>Box3</div> <div>Box4</div> <div>Box5</div> <div>Box6</div> <div>Box7</div> <div>Box8</div> <div>Box9</div> <div>Box10</div> <div>Box11</div> </div>

CSS

* { margin: 0; padding: 0; } .container { overflow: auto; display: block; } .container > div { margin: 20px; width: 150px; height: 100px; background: blue; float: left; color: #fff; text-align: center; }

Answer 2

您不需要text-align: justify; CSS规则 http://jsfiddle.net/2ngCS/

灵活的缩略图网格与CSS

2 个答案: