右对齐具有一个绝对位置的两个Divs

Question

如何正确对齐锚点和内容DIV？

（div是示例中带有蓝色和红色边框的Anchor和Window）

div.tabs {
      background-color: #a0a0a0;
      position: relative;
      width: 400px;
    }
      
    div.tabs ul.tabs {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    div.tabs ul.tabs li {
      display: inline-block;
      padding: 8px;
    }
    
    div.tabs div.content {
      background-color: #e8e8e8;
      padding: 8px;
    }
    
    div.tabs div.toolbar {
      background-color: #e8e8e8;
      position: absolute; 
      right: 12px; 
      top: 0;
    }
    
    div.popup {
      position: relative;
    }
    
    div.popup div.anchor {
      border: 1px solid blue;
    }
    
    div.popup div.window {
      border: 1px solid red;
      position: absolute;
      z-index: 2000;
      width: 160px;
    }
    
    p {margin: 0;}

<div class="tabs">
    
      <ul class="tabs">
        <li class="tab">Tab 1</li>
        <li class="tab">Tab 2</li>
      </ul>
    
      <div class="content">
        Content
      </div>
      
      <div class="toolbar">
        <div class="popup">
          <div class="anchor">
            <a>Anchor</a>    
          </div>
          <div class="window">
            <p>Line 1</p>
            <p>Line 2</p>
          </div>
        </div>
      </div>
    
    </div>

Answer 1

我假设您要将其移动到选项卡表的右侧。所以我就是这样做的：

在CSS中，使用以下命令：

       div.tabs {
          background-color: #a0a0a0;
          position: relative;
          width: 400px;
        }

        div.tabs ul.tabs {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        div.tabs ul.tabs li {
          display: inline-block;
          padding: 8px;
        }

        div.tabs div.content {
          background-color: #e8e8e8;
          padding: 8px;
        }

        div.tabs div.toolbar {
          background-color: #e8e8e8;
          position: absolute; 
          right: 0px; 
          top: 0;
        }

        div.popup {
          position: relative;
        }

        div.popup div.anchor {
          border: 1px solid blue;
          position: relative;
        }

        div.popup div.window {
          border: 1px solid red;
          position: absolute;
          z-index: 2000;
          width: 160px;
          height: 34px;
          right: 0px;
          top: 165%;
        }

        p {margin: 0;}

编辑：最终版本。祝你好运！

Answer 2

在text-align: right;和div.popup div.anchor CSS部分中使用CSS属性div.popup div.window。

Answer 3

尝试一下...

div.tabs {
      background-color: #a0a0a0;
      position: relative;
      width: 400px;
    }
      
    div.tabs ul.tabs {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    div.tabs ul.tabs li {
      display: inline-block;
      padding: 8px;
    }
    
    div.tabs div.content {
      background-color: #e8e8e8;
      padding: 8px;
    }
    
    div.tabs div.toolbar {
      background-color: #e8e8e8;
      position: absolute; 
      right: 0; 
      top: 0;
    }
    
    div.popup {
      position: relative;
    }
    
    div.popup div.anchor {
      border: 1px solid blue;
      right: 0;
    }
    
    div.popup div.window {
      border: 1px solid red;
      position: absolute;
      right: 0;
      z-index: 2000;
      width: 160px;
    }
    
    p {margin: 0;}

<div class="tabs">
    
      <ul class="tabs">
        <li class="tab">Tab 1</li>
        <li class="tab">Tab 2</li>
      </ul>
    
      <div class="content">
        Content
      </div>
      
      <div class="toolbar">
        <div class="popup">
          <div class="anchor">
            <a>Anchor</a>    
          </div>
          <div class="window">
            <p>Line 1</p>
            <p>Line 2</p>
          </div>
        </div>
      </div>
    
    </div>