如何將兩個div容器並排放置在同一排中？

我有兩個div的contentainer，他們每個人都有頭和段落在裏面。現在，我想將容器放在同一行，以便它們可以並排排列，並具有相同的邊距。如何將兩個div容器並排放置在同一排中？

這是我試過的。這個問題，你可以看到，第二個容器不在同一條線上，看起來它比第一個容器有更長的餘量。

HTML：

<div id="gallery"> 
<div id="gallery-text-1"> 

<p id="gallery-text-quote-1" style="font-family:Century Gothic; color:#006600"><b>Header-1</b></p> 

<p id="gallery-paragraph-1"> 
paragraph1 
</p> 
    </div> 
<br /> 
<div id="gallery-text-2"> 
<p id="gallery-text-quote-2" style="font-family:Century Gothic; color:#006600"><b>Header-2</b></p><br /> 

<p id="gallery-paragraph-2"> 
paragraph2 
</p> 
</div> 
    </div>

.CSS：

#gallery-text-1{ 
    float:left; 
} 

#gallery-text-2{ 
    float:left; 

}

觀看演示：Here

來源

2015-05-28 Esha

我寧願使用'顯示：inline-block的;'過'浮動：left'恕我直言。此外，'
'標籤強制換行，因此如果ROM允許，則刪除允許它們並排顯示。 – jbutler483

刪除
標籤。我也會建議使用像zurb基礎或getfractional.com網格系統 –

取出<br>標籤和解決您的問題。

來源

2015-05-28 15:40:39 jaunt

jaunt，非常感謝你的回答。它雖然解決了我的問題。但現在剩下的唯一問題是兩個容器之間沒有空間，它們彼此緊密連接。 – Esha

然後你可以使用margin或者padding來將它們分開一個定義的數量，或者把'＃gallery-text-2 {float：left;}'改成'＃gallery-text-2 {float：right;}'給他們在整個頁面中分離。 – jaunt

施加一定的寬度到div雙方的，然後對他們使用float left屬性

#gallery-text-1{ 
    width:45%; 
    float:left; 
    } 
#gallery-text-2{ 
    width:45%; 
    float:left; 
}

試試這個

來源

2015-05-28 15:50:52 Mayur

如何將兩個div容器並排放置在同一排中？

回答

相關問題