Question

示例：

<div class="main">
    <div class="left" style="width:100%;float:left;">A</div>
    <div class="right" style="width:100%;float:right;">B</div>
</div>

结果：A B

我想这样做：B A

Answer 1

假设你想用css做，否则你可以只交换div。

<div class="main">
    <div class="right" style="width:50%;float:right;">A</div>
    <div class="" style="width:50%;">B</div>
</div>

Answer 2

您也可以使用display: flex;。这是我过去拼凑的一个例子。

* {
   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>

Answer 3

有这样的问题

.main   { display: table; }
.left  { display: table-footer-group; }
.right { display: table-header-group; }

更改左右分区位置

3 个答案: