如何并排放置两个段落(彼此相邻)？

Question

我有两个由父div包装的div容器.每个子div包含带标题的段落.如果我尝试将这两个段落(包括标题)在同一行中彼此相邻,它们就不会停留.他们只是分解并坐在其他人的下面. 如何将它们彼此相邻,并且从顶部开始保持相同的余量？

注意我总是希望保留与第一段演示中显示的文本数量相同的文本.

HTML:

    <div id="gallery-text">

    <div id="gallery-text-left" style="float:left">
    <p id="gallery-text-quote-left" style="font-family:Century Gothic; color:#006600"><b>I am not interested in shooting new things, I am interested to see things new.</b></p>

    <p id="gallery-paragraph-1" style="font-family:Georgia">
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    bodybodybodybodybodybodybodybodybodybodybodybodybodybody
    </p>
    </div>
    <div id="gallery-text-right" style="float:left">
    <p id="gallery-text-quote-right" style="font-family:Century Gothic; color:#006600"><b>External photo albums</b></p>
    <p id="gallery-paragraph-2" style="font-family:Georgia">
    <a>Link coming soon</a>
    </p>
    </div>
</div>

.CSS:

 #gallery-text-left{
}
#gallery-paragraph-1{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-paragraph-2{
border-left:8px solid #3CB371;
border-radius:4px;
padding-left:15px;
}
#gallery-text-right{
}

请看看我的演示.

Answer 1

这将有效,但当窗口宽度低于某个点时,文本将位于其他文本的下方

#gallery-text-left{
float:left;
width:50%
}

我会考虑使用像Bootstrap这样的东西,而不是自己编写一切