Beispiel:ändern Links und Rechts Div Position
<div class="main">
<div class="left" style="width:100%;float:left;">A</div>
<div class="right" style="width:100%;float:right;">B</div>
</div>
Ergebnis: AB
ich tun möchte: BA
vorausgesetzt, Sie es mit CSS tun wollen, sonst könnte man nur die Swap divs.
<div class="main">
<div class="right" style="width:50%;float:right;">A</div>
<div class="" style="width:50%;">B</div>
</div>können Sie display: flex; auch verwenden. Hier ist ein Beispiel, das ich in der Vergangenheit zusammengestellt habe.
* {
margin:0;
padding:0;
}
body {
display: flex;
flex-flow: row wrap;
height:100%;
}
body > * {
padding: 10px;
margin-right:10%;
flex: 1 90%;
}
header {
background: #ED1B24;
height:35px;
}
footer {
background: #7F7F7F;
}
.main_content {
text-align: left;
background: #A349A3;
min-height:200px;
}
.gallery_filter {
background: #FEAEC9;
}
p {
background: #FF7F26;
height:50px;
}
.gallery_upload {
background: #00A3E8;
}
.g_ads {
padding: 0;
margin: 0;
flex: 4 10%;
background: #7092BF;
height:100%;
width: 10%;
position: absolute;
right: 0;
}
.gallery_filter, .gallery_upload { flex: 0 2 44%; margin:0; }
.main_content { flex: 3 90%; }
header { order: 2; }
p { order: 3; }
.gallery_filter { order: 4; }
.gallery_upload { order: 5; }
.main_content { order: 6; }
footer { order: 7; }
.g_ads { order: 1; }<body>
<header>Header</header>
<p>image</p>
<div class="main_content">Main Content</div>
<div class="gallery_filter">Filter</div>
<aside class="gallery_upload">Upload</aside>
<div class="g_ads">Box</div>
<footer>Footer</footer>
</body>Es hatte Probleme wie diese
.main { display: table; }
.left { display: table-footer-group; }
.right { display: table-header-group; }
Breite sollte 100% betragen. –
Wenn Sie Breite 100% verwenden, verwenden sie die volle Breite und werden nicht wie gewünscht nebeneinander sein. Warum tauscht man einfach die Divs? –
Weil ich in der mobilen Auflösung ändern möchten –