Question

我在左侧有多个分区，但是当我在右侧放置一个分区时，它显示在下一行。我想要一个sidebar，所以我想在框的右侧sidebar div。 float right使其显示在框的右侧，但不会显示在另一个divs旁边。

Answer 1

如果我理解正确，您希望div f出现在所有其他人的右侧。其他都包含在div a中。

不幸的是，f也包含在a中，我认为这是解决问题的一部分。

如果您将f移到a之外，并将a和f 左移，那么它们将以足够宽的布局展开并排出现。如果显示器不够宽（例如在移动设备上），则f会自动在a下滑动。

所有其他div都包含在a内，并且不会直接受到影响。

HTML：

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

CSS：

.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;
 }

请参阅https://jsfiddle.net/sdq6meyx/5/了解演示

Answer 2

您可以在编写时将float: right指定给该元素（.f），但在HTML代码中，您必须将其作为.a div中的第一个元素，高于所有其他元素。

https://jsfiddle.net/z4hhox53/2/

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

2 个答案: