Прижать div-ы к краям

Тема в разделе "Верстка", создана пользователем denism300, 7 ноя 2014.

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

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    121
    Симпатии:
    4
    контент располагается в две колонки. эти колонки обернуты в div-ы с классом .content.
    как прижать левую колонку к левому краю, а правую, соответственно, к правому родительского блока block-out?
    float: left и float: right не прокатит, т.к. контент генерируется модулем и div-ы имеют одинаковый класс. отдельно к левому или отдельно к правому класс добавить нельзя.

    конструкция вида:

    Код:
    <div class="block-out">
    <div class="content">
    тут выводится контент
    </div>
    <div class="content">
    тут выводится контент
    </div>
    </div>
    css
    Код:
    .block-out {
    width: 100%;
    }
    .content {
    width: 45%;
    margin: 10px;
    float: left;
    }
     
  2. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    чеж нельзя то
    Код:
    .content {
    width: 45%;
    margin: 10px;
    float: right;
    }
    .content:first-child {
    float: left;
    }
     
    NikroVir нравится это.
  3. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    79
    Симпатии:
    31
    Вы то хоть сами поняли что написал ?
    Для одного и того же блока задали одновременно "float: left;" и "float: right;", скорее всего хотели написать ":last-child", но я бы сказал что это не совсем правильно.
    Лучше всего делать вот таким способом:
    Код:
    .content {
    width: 45%;
    margin: 10px;
    }
    .content:nth-child(1) {
    float: right;
    }
    .content:nth-child(2) {
    float: left;
    }
    А еще не забывать фиксировать высоту блоков content (с помощью "clear: both;"), что бы другие блоки на них не налезали.
     
    Последнее редактирование: 7 ноя 2014
    Veysel и denism300 нравится это.
  4. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    121
    Симпатии:
    4
    спасибо, то, что нужно!
     
  5. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    79
    Симпатии:
    31
    Всегда пожалуйста )
     
  6. kadurinho

    kadurinho Shop Script

    Moderator
    Регистр.:
    21 июн 2011
    Сообщения:
    618
    Симпатии:
    248
    и передать большой пример IE и его семейству.
     
  7. qpPeW

    qpPeW Постоялец

    Регистр.:
    5 окт 2009
    Сообщения:
    79
    Симпатии:
    31
    Ну это уже совсем другой разговор, лично я на него забиваю, т.к. работаю с линукса...
     
  8. mdss

    mdss ♖♘♗♕♔♗♘♖

    Moderator
    Регистр.:
    20 фев 2007
    Сообщения:
    1.134
    Симпатии:
    668
    В курсе что такое переопределение? И как браузер считывает файл стилей? Пример я написал рабочий и намного более простой и лаконичный.
     
  9. mindnomind

    mindnomind Писатель

    Регистр.:
    11 ноя 2014
    Сообщения:
    6
    Симпатии:
    1
    можно так
    Код:
    .content {
    width:100%;
    position:relative;
    }
    .content {
    position:absolute;
    }
    .content:nth-child(1) {
    right:0;
    }
    .content:nth-child(2) {
    left:0;
    }
    
     
Статус темы:
Закрыта.