Html 如何在div中对齐这两个元素

我在对齐div中的两个元素（quote和arnold pic）时遇到了一些问题

下面是它的外观：

<div class="container">
    <div id="quote">     
        <p id="tagline-quote">"As a personal fitness trainer, I&#039;m asked on a weekly basis where the best place to buy supplements is, and my answer is always bodybuilding.com"</p>

        <img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg"></img>
    </div> <!-- end #quote -->

---

如果要并排讨论，可以使用“float:left”和“display:inline block”的组合来强制它们彼此相邻

.container {
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

#quote {
    padding: 60px 400px 20px 13px;
    text-align: center;
    display: inline;
}


p#tagline-quote {
    color: #777676;
    font-family: Georgia,serif;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
    text-shadow: 1px 1px 0 #FFFFFF;
    position:relative;
    width:400px;
    display: inline-block;

}

#q-image{
    position:relative;
    float: left;
}

这是一个教科书上的“css浮动101”问题。哦，等等，我以为那是原创的，但那正是我们所说的。您可以将图像定位在引号/段落中，并将其向右浮动-这与语义布局接管之前的浮动非常相似：）

现在，KodeKreachor代码的问题似乎是错误地“混淆”了下面的div，您可能看到quote容器看起来比它应该的短。解决方法是使用一个“clearfix”，它扩展父容器，以便浮动元素可以装入其中。将其从代码中删除，然后查看（临时）高亮显示的容器的行为

顺便说一句。。。尝试添加更多段落，并将图像移动到其中一个段落中。现在，这种“奇怪”的行为有了完美的意义——段落开始在漂浮的图像周围流畅，没有巨大的间隙

---

小提琴：还有：正确的引语。另外：img是一个自动关闭元素，所以原始标记无效。

您想如何放置它们？左侧的引号和右侧的图片，所以这是Arnold获取其内容的地方？@SalmanA不太清楚，但是是的。这。。。这不是内联块的用途，我承认应该使用其中一个，但是我不认为使用内联块来灵活地并排显示块项有什么错。它允许您轻松地调整每个文本的高度，因此文本与图像对齐的位置很简单。请纠正我，如果我错了。内联块原本用于，位置块元素内嵌文本（即在文本的中间）。更大的问题来自于它对垂直对齐的处理，特别是这里显示的空白：-有更好的解释，比如有意义。谢谢你的解释。我读了你上面贴的整篇文章。非常有用和彻底。谢谢你的帮助。

.container {
    margin: 0 auto;
    text-align: left;
    width: 960px;
}

#quote {
    padding: 60px 400px 20px 13px;
    text-align: center;
    display: inline;
}


p#tagline-quote {
    color: #777676;
    font-family: Georgia,serif;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
    text-shadow: 1px 1px 0 #FFFFFF;
    position:relative;
    width:400px;
    display: inline-block;

}

#q-image{
    position:relative;
    float: left;
}

<div class="container">
    <div id="quote" class="clearfix">
        <img id="q-image" alt="" src="http://www.cheapestsupplementsonline.com/wp-content/uploads/2012/03/arnold_schwarzenegger.jpg" />        
        <p id="tagline-quote">&#8220;As a personal fitness trainer, I&#039;m
        asked on a weekly basis where the best place to buy supplements is,
        and my answer is always bodybuilding.com&#8221;</p>
    </div>
</div>​​​​​​​​​​​​​​​​​​​​​

#q-image{
    float:right;
    /*add some margin so that there is space between text and photo*/
    margin-left:10px;
}