html - 如何将两个 div 容器并排放置在同一行中？

Question

我有两个 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

Answer 1

删除 <br>标记并解决您的问题。