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

我有两个div contentainer，每个都有标题和段落。 现在我想把容器放在同一行，这样它们可以并排放置，从顶部开始留有相等的边距

这就是我尝试过的。这一个的问题是，正如你所看到的，第二个容器不在同一条线上，它似乎比第一个容器有更长的边距

HTML:

---

请参阅演示：

删除

标记，这样可以解决问题。
删除

标记，这样可以解决问题。
对两个div应用一些宽度，然后对其使用float left属性

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

试试这个
对两个div应用一些宽度，然后对它们使用float left属性

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

试试这个
我更喜欢使用
display:inline块上方<代码>浮动：左侧
IMHO。另外，

标记正在强制执行一个新行，因此如果rom允许，删除它将允许它们并排显示。删除
标记。我也建议使用ZURB基金会或GETSeRealOnal.COMI这样的网格系统，更喜欢使用<代码>显示：联机块；<代码>上方<代码>浮动：左侧
IMHO。另外，

标记正在强制执行一个新行，因此如果rom允许，删除它将允许它们并排显示。删除
标记。我也建议使用网格系统，如Zurb基金会或GigStudioal.com，非常感谢你的回答。但它解决了我的问题。但是现在唯一剩下的问题是两个容器之间没有空间，它们紧密地连接在一起。然后你可以使用边距或填充将它们按一定的量分开，或者将
#gallery-text-2{float:left；}
更改为
#gallery-text-2{float:right；}
，以便它们在整个页面上分开。jaunt，非常感谢你的回答。但它解决了我的问题。但是现在剩下的唯一问题是两个容器之间没有空间，它们紧密地连接在一起。然后，您可以使用边距或填充将它们按定义的数量分开，或者将
#gallery-text-2{float:left；}
更改为
#gallery-text-2{float:right；}
，以便它们在整个页面上分开。
#gallery-text-1{
    width:45%;
    float:left;
  }
#gallery-text-2{
  width:45%;
  float:left;  
}