Плавающие слои друг под другом

HeadInSky · October 29, 2010

Столкнулся с проблемой, не могу найти решение.

Есть три слоя, располагающиеся в ряд (float: left). Ширина определена, а высота по контенту.

При сжатии окна браузера, слой 3 не помещается в область просмотра, и должен перемещаться на строку ниже.

Но слой 1 выше остальных, и слой 3 оказывается не в начале, а справа от слоя 1, что конечно является нормальным поведением.

Но существует ли способ расположить третий слой под первым?

Код:

<head>
<style>
.container {
    float: left;
    width: 100%;
    background-color: gray;
}

    .a {
        float: left;    
        width: 100px;
        color: #fff;        
        background-color: #000;
        margin: 10px;
    }

</style>
</head>
<body>
    <div class="container">
        <div class="a">
            <p>1 block<br /><br />text</p>
        </div>
        <div class="a">
            <p>2 block</p>
        </div>   
        <div class="a">
            <p>3 block</p>
        </div>        
    </div>
</body>

Нет · October 30, 2010

HeadInSky, оберните первые два блока ещё одним, у которого пропишите «float: left» и «overflow: hidden».

HeadInSky · October 30, 2010

HeadInSky, оберните первые два блока ещё одним, у которого пропишите «float: left» и «overflow: hidden».

Прошу прощения, я не до конца объяснил задачу - кол-во блоков может быть какое угодно. По сути это каталог товаров в инет-магазине.

psywalker · October 30, 2010

http://blog.grakhov.com/post/99406348/inline-block

HeadInSky · October 30, 2010

спасибо!

Sign In

Плавающие слои друг под другом

Question

HeadInSky

Link to comment

Share on other sites

4 answers to this question

Recommended Posts

Нет

Link to comment

Share on other sites

HeadInSky

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

HeadInSky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information