ich ein Problem in meinem Projekt habe:Position von div-Blöcken (einfache CSS-Ausgabe)
<div id="div1"></div>
<div id="div2"></div>
ich für desctop @media in CSS tun (min-width: 768px) Optionen Anzeigeblock und float links. Zuerst mit 70% für die zweite 30%. In mobilen brauche ich 100% Breite von beiden und müssen div2 oben div1 anzeigen. Float rechts für den ersten und float left für den zweiten nicht funktioniert. Brauche deine Hilfe Jungs.
Wie wäre es damit bewegen? Flex-Box ermöglicht es Ihnen, die Richtung zu bestimmen und auch wenn Sie wirklich wählerisch sind, können Sie die Bestellnummer auf dem Artikel selbst angeben.
#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>Ah, Recht, Flex würde das lösen, und ich denke, dass heutzutage der meiste Browser es unterstützen wird. –
eine andere gute Lösung auch! Danke dir auch! –
Wenn Sie div2 oben wollen, müssen Sie Ihre HTML-div2 oben auf div1
#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>aber dann div1 wird rechts von div2, nein? –
Ja, du hast recht, ich habe div2 geändert, um nach rechts zu floaten, dann wird div1 auf der linken Seite sein. –
ja, aber können wir das machen, indem wir div1 block zuerst im HTML code lassen? Warum funktionieren Div1 und Div2 nicht? –
Können Sie Ihre CSS schreiben? –
Zeigen Sie uns, was Sie versucht haben – Sankar
# div1 {float: right; Bildschirmsperre; Breite: 100%; } # div2 {float: links; Bildschirmsperre; Breite: 100%; } –