浮動div元素正確

我真的很難放置一個div標籤。我需要將帶有黃色邊框的表單框放在右邊，我的文本入站行銷和中間的子文本。任何人都可以幫助我解決這個問題嗎？浮動div元素正確

文本鋪在帶綠色邊框的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; 
}

來源

2016-08-18 KrMa

因爲容器類中的flex屬性，刪除display：flex;它將所有元素與容器的中心對齊。 – Khurram

我不完全相信我對你要清楚什麼在這裏做，但你可以在你的.top-area > .container項目上使用display: block;將其移動到綠色容器的右側。如果你想要它在綠色容器的外面和紅色容器的右邊，那麼你需要將它移動到HTML中。現在它被包含在帶有綠色邊框的div中，而不是紅色邊框。

來源

2016-08-18 13:19:49 Kim

非常感謝您的回答。我只是試圖改變分區，但沒有結果。你有一個想法應該如何應對？ – KrMa

您的目標是將文本集中在綠色div和綠色div之外的黃色div內，並在紅色div的右邊？需要更多的澄清。你有沒有想過使用引導列？ – Kim

浮動div元素正確

回答

相關問題