如何将两个div容器并排放在同一行?

时间:2015-05-28 15:39:22

标签: html css html5 css3

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

这是我尝试过的。你可以看到这个问题是第二个容器不在同一条线上,它似乎比第一个容器的边距更长。

HTML:

<div class="container">
 <img src="http://i48.tinypic.com/wrltuc.jpg" />
</div>

.container {
    width: 700px;
    height: 400px;
    background: #444;
    margin: 0 auto;
    border: solid black 1px;
}
.container img{
    width: 100%;
    height: 100%;
}

.CSS:

    <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>

请参阅演示:{{3}}

2 个答案:

答案 0 :(得分:4)

删除<br>标记并修复您的问题。

答案 1 :(得分:0)

对div使用一些宽度然后使用float left属性

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

试试这个