浮動小数点の要素右

Question

divタグを配置するのは難しいです。私は右に黄色の境界線を、私のテキストインバウンドマーケティングと中間にサブテキストと私のフォームボックスを取得する必要があります。誰もがこのことを通して私を助けることができますか？

• テキストは緑色の枠線で区切られています。
• 背景画像は

赤枠でのdivに敷設されたここで私が今まで試したどのように私のコードです。 私のコードは次のようになります。

HTML：

<div class="top-area" style="border: 4px solid red;"> 
     <div class="container" style="border: 4px solid green;"> 
      <div class="form-container" style="border: 4px solid yellow;"> 
       <div> 
        @Umbraco.RenderMacro("Ebook") 
       </div> 
      </div> 
      <h1 class="header-xl center"> 
        @Html.Raw(headerText) 
      </h1> 
      <p class="sub-header center"> 
       @Html.Raw(CurrentPage.imageTeaserText) 
      </p> 
     </div> 
    </div> 

CSS

.top-area { 
    position: relative; 
    text-align: center; 
} 

    .top-area, .top-area > .container { 
     min-height: 500px; 
     display: -ms-flexbox; 
     display: flex; 
    } 

     .top-area > .container { 
      -ms-flex-align: center; 
      align-items:center; 
      -ms-flex-pack: center; 
      justify-content: center; 
      -ms-flex-direction: column; 
      flex-direction: column; 
     } 

     .top-area p { 
      margin: 0; 
      color: #fff; 
      width: 100%; 
     } 

     .top-area .header-xl { 
      margin-top: 20px; 
      padding: 0; 
     } 

     .top-area .sub-header { 
      font-weight: 300; 
      margin-top: 5px; 
      font-size: 2.8em !important; 
     } 

.form-container { 
    display: block; 
    float: right; 
    float: right; 
    padding: 20px 0; 
    width: 320px; 
} 

Answer 1

私は私はあなたがしようとしているものには明らかだと全くわからないんだけどここで行うことができますが、.top-area > .containerアイテムのdisplay: block;を使用して緑色の容器内の右側に移動することができます。緑色のコンテナの外側と赤いコンテナの右側を望むなら、それをHTMLで移動する必要があります。今は赤い枠線ではなく、緑の枠線を持つdivに含まれています。