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 here...

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

1 个答案: