左右浮动面板 CSS

Question

我需要在地图上放置两个浮动面板，但float: right不起作用。请帮忙。

我尝试了一切，但似乎position: absolute禁用了float: right或其他东西。

有没有办法将第二个面板（#floating-panel2）向右对齐而不改变第一个面板（#floating-panel1）的对齐方式？

我需要这样的东西：

这是我的 html 和 css：

    #wrapper { position: relative; }

    #floating-panel1 {
      position: absolute;
      width: 265px;
      top: 55px;
      left: 5px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
    }
    
    #floating-panel2 {
      position: absolute;
      width: 265px;
      top: 55px;
      left: 0px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
      float:right;
    }

<div id="wrapper" style="height: 100vh">
      <div id="floating-panel1">
        <h1>PANEL 1</h1>
      </div>
      <div id="floating-panel2">
        <h1>PANEL 2</h1>
      </div>
    </div>

请帮忙

Answer 1

这是您要找的吗？如果是，您所要做的就是更改left: 5px为right: 5px第二个面板上的。

#wrapper { position: relative; }

    #floating-panel1 {
      position: absolute;
      width: 265px;
      top: 55px;
      left: 5px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
    }
    
    #floating-panel2 {
      position: absolute;
      width: 265px;
      top: 55px;
      right: 5px;
      z-index: 5000;
      background-color: rgb(66, 72, 79);
      padding: 5px;
      border: 1px solid rgb(66, 72, 79);
      border-radius: 1px;
    }

<div id="wrapper" style="height: 100vh">
      <div id="floating-panel1">
        <h1>PANEL 1</h1>
      </div>
      <div id="floating-panel2">
        <h1>PANEL 2</h1>
      </div>
    </div>