Div элементы с float:left разной ширины друг под другом?

Тема в разделе "Верстка", создана пользователем sunyang, 17 мар 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    444
    Симпатии:
    30
    Здравствуйте.
    вот пример накатал:
    Перейти по ссылке
    Все дивки с float:left и разной высоты
    видите - три последних дивки перенеслись на новую строку, но между первыми тремя и последними пустота. Как сделать, чтобы не было пустот?
    Хочу сделать как в обычной газете: несколько колонок, в них объявы одной ширины, но разной высоты, но чтобы не было между ними пустот после добавления новой.
    Как реализовать можно?
     
  2. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.523
    Симпатии:
    1.376
  3. Exquisitor

    Exquisitor Создатель

    Регистр.:
    16 сен 2007
    Сообщения:
    20
    Симпатии:
    2
    :)

    .centerdiv div {
    border: 1px solid #FF0000;
    float: left;
    margin:10px 1px(0);
    width: 120px;
    }
    за это все отвечает маргин и ширина каждого блока
     
  4. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    444
    Симпатии:
    30
    Я так понял у нижних блоков нужно ставить минусовой margin, вот только как теперь его расчитывать для последующих блоков)
     
  5. Exquisitor

    Exquisitor Создатель

    Регистр.:
    16 сен 2007
    Сообщения:
    20
    Симпатии:
    2
    Ниче не понимаю) зачем только у нижних? это две строки нужно? или как? или нужно чтоб была одна строка с дивами разной высоты, потом создавать следующую строку?? нужно всем блокам поставить margin-left и margin-right как можно меньший - это будут расстояния слева и справа.
    если построчно:
    Код:
    <div style="position:relative; min-height:150px;">
     
        <div style="float:left; height:140px; width:150px; margin:10px 0;">140px</div><div style="float:left; height:190px; width:150px; margin:10px 0;">190</div>
     
    </div>
     
    <div style="position:relative; min-height:150px;">
     
        <div style="float:left; height:160px; width:150px; margin:10px 0;">160px</div><div style="float:left; height:190px; width:150px; margin:10px 0;">190</div>
     
    </div>
     
    <div style="position:relative; min-height:150px;">
     
        <div style="float:left; height:140px; width:150px; margin:10px 0;">140px</div><div style="float:left; height:190px; width:150px; margin:10px 0;">190</div>
     
    </div>
     
    <div style="position:relative; min-height:150px;">
     
        <div style="float:left; height:160px; width:150px; margin:10px 0;">160px</div><div style="float:left; height:190px; width:150px; margin:10px 0;">190</div>
     
    </div>
     
  6. sunyang

    sunyang

    Регистр.:
    25 апр 2009
    Сообщения:
    444
    Симпатии:
    30
    вощем это сложно автоматизировать через скрипт. Поэтому сделал дивы с фиксированной высотой.
     
  7. Kaiserdc

    Kaiserdc Писатель

    Регистр.:
    26 мар 2012
    Сообщения:
    1
    Симпатии:
    0
    не вижу вашего примера, т.к. он скрыт, но если я правильно понял проблему то может помочь вот этот скрипт
    Перейти по ссылке