Как сложить 2 или более горизонтальных div в вертикальный div, когда пользователь сжимает окно браузера?

У меня есть 2 div в одной строке, каждый шириной 50% и с плавающей запятой: слева. Я бы хотел, чтобы они располагались друг над другом, если пользователь просматривает страницу со смартфона. Сейчас элементы div остаются в одной строке, даже если окно браузера сужено до 300 пикселей или при просмотре со смартфона.


html layout css liquid
person Alex Williams    schedule 07.03.2013    source источник
comment
дайте divs минимальную ширину, например. 150 пикселей   -  person Ingo    schedule 07.03.2013

Ответы (2)


arrow_upward
2
arrow_downward

Медиа-запросы — это то, что нужно. Я бы выбрал подход, ориентированный на мобильные устройства, и добавил медиа-запросы, чтобы масштабировать дизайн. То есть начните с не плавающих элементов div и добавьте плавающие элементы и ширину, когда размер экрана достигнет определенного размера:

<!-- HTML -->
<div class="wrapper">
    <div class="column">
        <p>This is column 1</p>
    </div>
    <div class="column">
        <p>This is column 2</p>
    </div>
</div>

/* CSS */
.wrapper {
    /* Ensure wrapper contains the columns, even when they are floated, by
       creating a new Block formatting context */
    overflow: hidden;
}

.column {
    /* Ensure we have some margins when the columns are collapsed, or 
       other content is displayed below. */
    margin-bottom: 2em;
}

/* Edit the min-width condition to match your desired breakpoint. */
@media screen and (min-width: 400px) {
    .wrapper .column {
        width: 50%;
        float: left;
    }
}

Живая демонстрация здесь: http://jsfiddle.net/jPgWL/

person PatrikAkerstrand    schedule 07.03.2013
comment
Здравствуйте, Патрик, большое спасибо. Это исправление работает отлично! Я никогда не обращал особого внимания на @media, потому что всегда думал, что это наиболее полезно для css, поскольку оно связано с печатью веб-страниц. Спасибо :) - person Alex Williams; 08.03.2013
comment
@AlexWilliams Не забудьте принять этот ответ (нажмите зеленое подмигивание под кнопкой «за»). - person Bram Vanroy; 08.03.2013
comment
Извините, там написано, что моя репутация должна быть не менее 15, чтобы голосовать. Сейчас мне всего 11 :( - person Alex Williams; 19.12.2013

arrow_upward
1
arrow_downward

Используйте медиа-запросы:

@media screen and (min-width: 321px) {
  #wrapper {width: 100%;}
  .content {
    width: 50%;
    float: left;
  }
}
@media screen and (max-width: 320px) {
  #wrapper {width: 100%;}
  .content {
    width: 100%;
    float: none;
  }
}
person Bram Vanroy    schedule 07.03.2013
comment
что было бы более чистым решением, чем просто добавление минимальной ширины, поскольку оно также увеличивает ширину до 100%, если div обернут - person Ingo; 07.03.2013