靈活的縮略圖網格與CSS

Question

我試圖在屏幕上放置縮略圖，甚至是“填充”。 這是一個說明問題的圖像：

頁面預覽

<!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

這樣的東西對你有用嗎？

這是基於SO提供的答案，我建議你閱讀，以及這個 - 也是基於它。 這證明了兒童要素的合理性 。

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
}

或者，如果不是兒童物品被對齊，你希望他們從左到右對齊，看看這個小提琴，根據這個答案在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;
}

Answer 2

你不需要text-align: justify; CSS規則http://jsfiddle.net/2ngCS/

靈活的縮略圖網格與CSS

問題描述

2 個解決方案

解決方案1
8 已采納 2013-12-16 10:03:32

解決方案2
-2 2013-12-16 09:58:06

靈活的縮略圖網格與CSS

問題描述

2 個解決方案

解決方案1 8 已采納 2013-12-16 10:03:32

解決方案2 -2 2013-12-16 09:58:06

解決方案1
8 已采納 2013-12-16 10:03:32

解決方案2
-2 2013-12-16 09:58:06