Как выставить 3 дива в ряд в css

Тема в разделе "Веб-дизайн", создана пользователем iurix, 29 июн 2008.

Статус темы:
Закрыта.
Модераторы: zek24
  1. iurix

    iurix Писатель

    Регистр.:
    5 фев 2008
    Сообщения:
    6
    Симпатии:
    0
    Вопрос по сабжу
     
  2. masto

    masto Прохожие

    стили width и float
     
  3. Лариса

    Лариса Читатель

    Заблокирован
    Регистр.:
    21 сен 2007
    Сообщения:
    390
    Симпатии:
    128
    не все так просто? если захочется выровнять. masto- ты слишком краток;)
    http://blog.html.it/layoutgala/
    Держи шпаргалочку. Тут тебе на все варианты, вдруг выплывут дальше вопросы
     
  4. iurix

    iurix Писатель

    Регистр.:
    5 фев 2008
    Сообщения:
    6
    Симпатии:
    0
    нашел простой способ

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .fl24 {
    float: left;
    width: 24%;
    }
    .a {
    background-color: #336699;
    }
    .b {
    background-color: #669966;
    }
    .hk {
    clear: both;
    }
    -->
    </style>
    </head>

    <body>
    <div class="fl24 a">Content for class "a" Goes Here</div>
    <div class="fl24 b">Content for class "a" Goes Here</div>
    <div class="fl24 a">Content for class "a" Goes Here</div>
    <div class="fl24 b">Content for class "a" Goes Here</div>
    <div class="hk"></div>
    Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here Content for class "a" Goes Here

    </body>
    </html>
     
  5. Wharfadale

    Wharfadale Постоялец

    Регистр.:
    31 июл 2007
    Сообщения:
    55
    Симпатии:
    1
    Используйте флоаты!!!
    Вот так:

    #raz {float:right}
    #dva {float:right}
    #tri {float:right}

    <div id="raz"></div>
    <div id="dva"></div>
    <div id="tri"></div>
     
  6. iurix

    iurix Писатель

    Регистр.:
    5 фев 2008
    Сообщения:
    6
    Симпатии:
    0
    не нашел проще того что выложил выше и работает отлично
     
  7. Trial

    Trial

    Регистр.:
    27 май 2008
    Сообщения:
    175
    Симпатии:
    8
    То что выше с float-ми расползется в Сафари они выравнятся в столбик по правому краю, а не рядом тут надо чередовать с aliga-ом. А вобщим поэксперементируй но под всеми браузерами проверяй.
     
  8. RoLex

    RoLex Писатель

    Заблокирован
    Регистр.:
    5 июл 2008
    Сообщения:
    5
    Симпатии:
    3
    Для этого надо юзать атрибуту inline.
     
  9. cds

    cds Постоялец

    Регистр.:
    28 янв 2007
    Сообщения:
    90
    Симпатии:
    8
    только лучше влево выровнять
    чтобы не расползлось:

    Код:
    #raz {float:right}
    #dva {float:right}
    #tri {float:right}
    #container,
    #container div {height: 200px}
    
    <div id="container">
      <div id="raz"></div>
      <div id="dva"></div>
      <div id="tri"></div>
    </div>
    
     
Статус темы:
Закрыта.