Как расположить несколько блоков div в ряд?

Тема в разделе "Наша Креативная Мастерская", создана пользователем alexlip, 27 авг 2015.

  1. alexlip

    alexlip Administrator

    Регистрация:
    28 ноя 2007
    Сообщения:
    32
    Симпатии:
    0
    Баллы:
    6
    Пол:
    Мужской
    Пример горизонтального расположения нескольких блоков <div>

    Для такого расположения блоков - всем div-ам присваиваем параметр float:left; и радуемся жизни! Для примера раположим несколько блоков <div> по горизонтали:


    Код:
     ------- установим стили блока DIV --------
    #liniya {
            width:110px;
            height:50px;
            background:#669900;
            float:left;
            margin-left:15px;
            text-align:center;
            }
        ---------- вставим блоки на страницу ---------
    <div style=" width:100%; height:1px; clear:both;">.</div> чтобы не лезли вверх
    <div id="liniya">DIV - 1</div> <div id="liniya">DIV - 2</div> <div id="liniya">DIV- 3</div>
    <div id="liniya">DIV - 4</div><div id="liniya">DIV - 5</div><div id="liniya">DIV - 6</div>
    <div style=" width:100%; height:1px; clear:both;"></div> чтобы ничего не влезало снизу
    

    Если нужно расположить два больших блока в один ряд, тогда нужно параметрам float:...; задать значения left для одного и right для другого. Очень важно, чтобы общая ширина блоков не превышала ширину страницы, иначе ничего не получиться и один блок сместиться в нужную сторону, но располагаться будет под соседним!

    Вот так все просто и легко
     
  2. alexlip

    alexlip Administrator

    Регистрация:
    28 ноя 2007
    Сообщения:
    32
    Симпатии:
    0
    Баллы:
    6
    Пол:
    Мужской
    Но есть и другой вариант сделать такое:

    Код:
    <table><tr><td>БАННЕР</td><td>БАННЕР</td></tr></table>
     

Поделиться этой страницей