Несколько делений по центру выровнены по левому краю, сидя рядом друг с другом - PullRequest
Новая
       32

Несколько делений по центру выровнены по левому краю, сидя рядом друг с другом

0 голосов
/ 29 декабря 2011

Я пытаюсь расположить несколько дивов рядом друг с другом, по центру.Когда окно становится слишком маленьким для размещения всех элементов 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>

1 Ответ

0 голосов
/ 29 декабря 2011

Поправьте меня, если я ошибаюсь, но вы имеете в виду что-то вроде: 

<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 здесь ...

...