html - 将右边的 div 包裹在左边的 div 周围

Question

我正试图将我的右侧 div 包裹在我的左侧，呈倒月亮形状？这是它现在的样子。

我想要做的是让红色 block 环绕黑色 block 的圆 Angular 。这是当前的 HTML/CSS 代码，如果 CSS 代码有点“困惑”，我深表歉意，因为我已经尝试过不同的代码。

HTML

<div class="container full-width">
  <div class="row proj">
    <div class="col-md-8 full-width">          
      <div class="content">          
      </div>
    </div>
    <div class="col-md-4 full-width">          
      <div class="options">
      </div>
    </div>  
  </div>
</div>

CSS

 .content { 
    margin-top: 75px;
    position: relative;
    width: 70vw;
    max-width: 100%;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
}

.options {  
    margin-top: 75px;
    position: relative;
    width: 30vw;
    max-width: 100%;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;  
}

.container .full-width{ 
    padding-left: 0;
    padding-right: 0;    
    overflow-x: hidden;
}

更新

已找到答案，感谢您的帮助，因此不得不根据您发布的代码稍微调整一下代码，现在看起来像这样。

.content { 
   margin-top: 75px;
    width: 30vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;     
}

.options {  
    margin-top: 75px;
    margin-left:3%;
    position:relative;
    float:right;
    width: 30vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;      
}

.container .full-width{ 
    position: absolute;
    padding-left: 0;
    padding-right: 0;

}

最后的结果是这样的，会再调整一下位置，但结果是我想要的，再次感谢。

更新 2

好吧，不得不再做一次编辑，出于某种原因我不得不将它们都向左浮动。否则，如果我保持红色 div 向右浮动并尝试扩大其宽度，它会向左扩大，知道为什么吗？当前代码:

.content { 
   margin-top: 75px;
    width: 44vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;     
}

.options {  
    margin-top: 75px;
    margin-left:20%;
    position:relative;
    float:left;
    width: 50vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;      
}

.container .full-width{ 
    position: absolute;
    padding-left: 0;
    padding-right: 0;

}

Answer 1

使用position:relative；对于 content 和 position:absolute;对于选项

 .content { 
    width: 30vw;
    height: 90vh;
    overflow: hidden;
    background-color: black;
    border-radius: 0 50vw 50vw 0;   
    float:left;
    position:relative;
    z-index:2;
}

.options {  
    margin-left:3%;
    position:absolute;
    float:right;
    width: 30vw;
    height: 90vh;
    max-height: 100%;
    overflow: hidden;
    background-color: red;  
}

<div class="container full-width">
      <div class="row proj">
        <div class="col-md-8 full-width">          
          <div class="content">          
          </div>
        </div>
        <div class="col-md-4 full-width">          
          <div class="options">
          </div>
        </div>  
    </div>