HTML – 灵活的缩略图网格与CSS

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

<!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解决方案开放.谢谢

解决方法

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
}

或者,如果不是儿童物品被对齐,而是希望他们从左到右对齐,请看this fiddle,基于this answer on SO

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

HTML – 灵活的缩略图网格与CSS

解决方法

相关文章