浮动面板左右 CSS答案

【问题标题】：Floating panels left and right CSS浮动面板左右 CSS
【发布时间】：2018-02-14 19:21:57
【问题描述】：

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

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

有什么方法可以在不改变第一个面板 (#floating-panel1) 的对齐方式的情况下将第二个面板 (#floating-panel2) 向右对齐？

我需要这样的东西：

这是我的 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>

请帮忙

【问题讨论】：

您可能必须在绝对定位和浮动之间进行选择。在#floating-panel中，尝试去掉float: right and left: 0px，并添加right: 5px（使用绝对定位将其放在右边。

标签： html css floating

【解决方案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>

【讨论】：

【解决方案2】：

用 float:left 和 float:right 显示 div 并将位置添加到 div1 position:absolute 和 div2 position:relative。

   #wrapper { position: relative; }

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

#floating-panel2 { 
  width: 265px;
  top: 55px; 
  float:right;
  position:relative;
  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>

【讨论】：