Center Right-Floated Div on Window Resize

У меня есть 2 divs, которые я настраиваю, чтобы быть рядом друг с другом в настольной версии моего сайта, а также в версии для мобильных/планшетов, я хотел бы, чтобы правый div был быть сверху, а левый div - под ним, причем оба они сосредоточены внутри родительского div. Я его настроить так:Center Right-Floated Div on Window Resize

<div id="right-top">right & top</div> 
<div id="left-top">left & bottom</div>

И мой CSS, как это:

#right-top { 
    position: relative; 
    float:right; 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    background-color: #ddd; 
    margin: 0px auto; 
} 

#left-top { 
    position: relative; 
    float:right; 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    background-color: #666; 
    margin: 0px auto; 
}

Они плавали прямо, так что я могу иметь право DIV сверху в небольших окнах браузера. Как заставить их сосредоточиться на более мелких браузерах, а не выравниваться с правой стороны?

источник

2015-02-09 James Likeness

У вас есть проблемы с использованием медиа запросов или не знают, как использовать медиа-запросы или возникли проблемы центрирования дивы в запросах медиа? – Huangism

Я не знал о запросах @media, спасибо за предложение! –

Я бы сделать это с помощью мобильного первый дизайн Это означает определение того, как она будет выглядеть первый на небольших устройствах, и постепенно добавляя дополнительные правила для больших экранов

<div class="my-div" id="right-top">right & top</div> 
<div class="my-div" id="left-top">left & bottom</div>

Таким образом, мы определяем общие правила (большинство вещей) между двумя разделителями класса (.my-div), спецификой to ids (# right-top и # left-top) И установите контрольную точку в 860px (430px раз по 2 для каждого div), и только после этого поплавьте divs вправо.

.my-div{ 
    width: 430px; 
    height: 300px; 
    max-width: 100%; 
    display: block; 
    margin: 0 auto; 
} 

#right-top { 
    background-color: #ddd; 
} 

#left-top { 
    background-color: #666; 
} 

@media only screen and (min-width: 860px) { 
    .my-div{ 
     float: right; 
    } 
}

Вы можете проверить это here

источник

2015-02-09 20:45:36 Agush

Это было очень полезно, идея построить его для небольших устройств, а затем идти оттуда - это путь, который я думаю. Спасибо за вашу помощь! –

@James Слава радость, что я могу помочь! [Это изображение] (http://bradfrost.com/wp-content/uploads/2012/03/43-650x487.png) иллюстрирует причины мобильной первой идеологии. Также помните DRY (не повторяйте себя), если вам нужно написать тот же код для 2 вещей, он, вероятно, может быть реорганизован и извлечен в класс. – Agush

Вы можете использовать запросы @media для гибкой компоновки.

Для например:

@media (max-width: 769px){ 
    #right-top,#left-top{ 
     float: none;/*unset the floated div*/ 
    } 
}

demo

источник

2015-02-09 20:32:47

Center Right-Floated Div on Window Resize

ответ

Смежные вопросы