多个 div 居中对齐，左对齐，彼此相邻

Question

我试图让多个 div 坐在一起，居中。当窗口变得太小而无法容纳一行中的所有 div 时，我希望溢出的 div 向下移动到下一行。最好左对齐但仍居中。

如果这是不可能的，我也很乐意让它们居中对齐。

我希望它如何发挥作用的一个例子是本页底部的大拇指 http:// /www.klossal.com/portfolio/index2.html

我遇到问题的当前页面位于此处 http://www.klossal.com/portfolio/test.html

这是我当前的代码：

<div
    align="center"
    style="
        clear:both;
        margin-left:auto;
        margin-right:auto;
        width: 100%;
        visibility: show;"> 


    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img         src="http://www.klossal.com/portfolio/library/space/space_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0"  style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0"  style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img    src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
        </div>
    </div>

    <div style="height:330px;width:330px;float:left;">
        <div style="left:0px;width:330px;">
            <a class="lib" href="#">
                <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" />
            </a>
        </div>
        <div style="width:300px;left:0px;">
            <p class="ex2" align="left">Made in Photoshop</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
            <p class="ex3" align="left">Photoshop created space environments made as concept backgrounds for several character drawings</p>
            <img src="/media/divider.png" width="100%" height="5px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
        </div>
    </div>

    <img src="/media/divider.png" width="100%" height="52px" border="0" style="opacity:0.0;filter:alpha(opacity=0)" />
</div>

Answer 1

如果我错了，请纠正我，但你的意思是：

<div class="container">
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/space/space_lib.png" />
            <p>Picture one..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/glow/glow_lib.png" />
            <p>Picture two..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/faces/faces_lib.png" />
            <p>Picture three..</p>
        </a>
    </div>
    <div class="img">
        <a href="#">
            <img src="http://www.klossal.com/portfolio/library/color/color_lib.png" />
            <p>Picture four..</p>
        </a>
    </div>
</div>

我认为？

检查 JSFiddle 此处...