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

Question

我在对齐一个 div 中的两个元素时遇到了一些麻烦(引用和 arnold 图片)。

这是它的样子:

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

这是CSS:

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

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


p#tagline-quote {
    color: #777676;
    font-family: Georgia,serif;
    font-size: 20px;
    font-style: italic;
    line-height: 30px;
    text-shadow: 1px 1px 0 #FFFFFF;
}

#q-image{
}

Answer 1

这是教科书“css floats 101”的问题。 哦，等等，我以为那是原创的，但事实确实如此the article on alistapart被称为。 您可以将图像放在引号/段落内并将其正确 float - 这几乎就是在语义布局接管之前制作 float 的目的:)

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

对于 CSS，我丢弃了一些原始的填充:

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

现在，您在使用 KodeKreachor 的代码时遇到的问题似乎是错误地“乱码”了下面的 div，并且您可能看到引用容器看起来比应有的短。解决方法是使用“clearfix”扩展父容器，以便 float 元素可以放入其中。从代码中删除它并查看(暂时)突出显示的容器的行为。

旁注...尝试添加更多段落并将图像移动到其中一个段落中。现在，“奇怪”的行为完全有道理了 - 段落开始围绕该 float 图像很好地流动，没有大的间隙。

fiddle :http://jsfiddle.net/EvdV8/另外:适当的引号。另外:img 是一个自关闭元素，因此原始标记无效。