У меня есть проблема в моем проекте:Положения Div блоков (простой вопрос CSS)
<div id="div1"></div>
<div id="div2"></div>
я делаю в CSS для desctop @media (мин-ширина: 768px) блок опций дисплея и поплавка влево. Для первых 70% для вторых 30%. В мобильном устройстве мне нужна 100% ширина обеих из них и вам нужно отобразить div2 сверху div1. Поплавок справа для первого и поплавок слева для второго не работает. Вам нужна помощь.
Как насчет этого? Flex позволяет вам указать направление, а также, если вы действительно придирчивы, вы можете указать номер заказа на самом элементе.
#container {
display: flex;
}
#div2 {
width:30%;
height:300px;
background:red;
}
#div1 {
width:70%;
height:300px;
background:green;
}
@media only screen and (max-width: 768px) {
#div1, #div2{
width: 100%;
}
#container {
flex-flow: column-reverse;
}
}<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
</div>А, правильно, flex решит это, и я думаю, что в настоящее время большинство браузеров его поддержат. –
другое хорошее решение тоже! и тебе спасибо! –
Если вы хотите div2 на вершине, ваш HTML должен двигаться div2 на вершине див1
#div2 {
width:30%;
height:300px;
background:red;
float:right
}
#div1 {
width:70%;
height:300px;
background:yellow;
float:left
}
@media only screen and (max-width: 768px) {
#div1, #div2 {
width:100%;
}
}<div id="div2">div2</div>
<div id="div1">div1</div>, но тогда div1 будет справа от div2, нет? –
Да, ваши права, я изменил div2 на float вправо, затем div1 будет слева –
да, но можем ли мы сделать это, оставив блок div1 сначала в HTML-коде? Почему div1 и div2 не работают? –
Вы можете разместить свой CSS? –
показать нас, что вы пробовали – Sankar
# div1 {float: right; display: block; ширина: 100%; } # div2 {float: left; display: block; ширина: 100%; } –