Jquery 如何在一侧显示多个div，在另一侧显示一个div？

我在左侧有多个分区，但当我在右侧放置一个分区时，它会显示在下一行。我想要一个

侧边栏

，所以我想要在框的右侧有

侧边栏div

float right

使其显示在框的右侧，但不显示在另一个

div

旁边

---

如果我理解正确，您希望div

f

显示在所有其他div的右侧。其他的都包含在div

a

中

不幸的是，

f

也包含在

a

中，我认为这是问题的一部分

如果将

f

移动到

a

之外，并将

a

和

f

都向左浮动，则它们将以足够宽的布局并排出现。如果显示器不够宽（例如在移动设备上），则

f

将自动滑到

a

下方

所有其他div都包含在

a

中，不会直接受到影响

HTML:

---

请参见演示

您可以在编写时将

float:right

分配给该元素（

.f

），但在HTML代码中，您必须将其作为

.a

div中的第一个元素，置于所有其他元素之上

---

您能简化代码吗？很难理解你想做什么。只需在文本中使用一些

div

s。我已经删除了代码并简单地添加了div，但是我需要它在蓝色

div

中，因为这是保存所有其他代码的主

div

。我该如何做到这一点？啊，好的。我刚刚更改了答案和小提琴：只需将它放在

.a

div中，在其他元素的上面

<div class ="a">
  <div class ="b">
  </div>
  <div class ="c">
  </div>
  <div class ="d">
  </div >
  <div class ="e">
  </div>
</div>
<div class ="f">
</div>

.a {
   background-color: blue;
   width: 400px;
   height: 200px;
   float: left;
 }

 .b {
   background-color: red;
   width: 330px;
   height: 50px;
 }

 .c {
   background-color: aqua;
   width: 300px;
   height: 60px;
 }

 .d {
   background-color: cadetblue;
   width: 320px;
   height: 70px;
 }

 .e {
   background-color: black;
   width: 200px;
   height: 20px;
 }

 .f {
   background-color: pink;
   width: 70px;
   height: 50px;
   float: left;
 }