如何在div容器中水平內嵌兩個div？

我想對齊容器div中的兩個div。但正確的div（尺寸較小）粘貼到容器div的右上角。相反，我希望他們兩個互相對齊。如何在div容器中水平內嵌兩個div？

這是我一直想要的代碼：

<div class = "row"> 
<div style = "float: left"> <h1> HUGE CONTENT </h1> </div> 
<div style = "float: right"> <p> small text </p> </div> 
<div style= "clear: both;"> </div> 
</div>

div的的內容是動態加載。所以不能使用寬度屬性！這樣就不同於我發現的現存問題。

任何幫助表示讚賞。謝謝。

來源

2014-05-20 Shashank

你需要使用一個顯示器規則將它們設置爲內聯框，然後用兩個垂直對齊如果線高比最高的盒子高，則將它們對齊或在線高度上對齊。丟棄殺死顯示 –

今天一個非常類似的問題早花車：http://stackoverflow.com/q/23754241/1612146 – George

oGeez：我看到您的解決方案。如果我無法修復寬度，因爲div內容是動態加載的？ – Shashank

既然你有3格，但最後一個看不見的，顯示：inline-block的+文本對齊：理由是蠻好的，你尋找的結果。 DEMO

CSS：

.row { 
    text-align:justify; 
} 
.row > div { 
    display:inline-block; 
} 
.fix { 
    width:100%; 
}

隨着HTML更新，等級：

<div class = "row"> 
<div class="left" > <h1> HUGE CONTENT </h1> </div> 
<div class="right"> <p> small text </p> </div> 
<div class="fix"> </div> 
</div>

來源

2014-05-20 10:21:21

太棒了！這工作完美:) – Shashank

<div class = "row"> 
<div style='50%;border:none'> <h1> HUGE CONTENT </h1> </div> 
<div style='50%;border:none'> <p> small text </p> </div> 
</div>

來源

2014-05-20 09:57:58

@Ravinder：我也需要做出的div爲float，左，右的DIV容器。該代碼不處理該問題。 – Shashank

檢查編輯的代碼。 –

我想你應該設置寬度和保留兩個「浮動：左」

這將可以幫助你

<div class = "row" > 
    <div style = "float: left; width : 60%"> <h1> HUGE CONTENT </h1> </div> 
    <div style = "float: left; width : 30%; padding : 5%"> <p> small text </p> </div> 
</div>

與適當的寬度和填充即可達到所需的外觀。

讓我知道的任何幫助

來源

2014-05-20 09:58:19

<div class = "row"> 
<div class ="row_block1"> <h1> HUGE CONTENT </h1> </div> 
<div class ="row_block2"> <p> small text </p> </div> 
<div style= "clear: both;"> </div> 
</div> 

<style> 
    .row 
    { 
     width: 100%; 
     display: block; 
    } 
    .row_block1 
    { 
     background: #e6e6e6; 
     display: table-cell; 
     margin-right: 5px; 
    } 
    .row_block2 
    { 
     background: #B28080; 
     display: table-cell; 
     margin-right: 5px; 
    } 


</style>

來源

2014-05-20 09:58:43

如何在div容器中水平內嵌兩個div？

回答

相關問題