Question

我在div中对齐两个元素（引用和arnold pic）时遇到了一些麻烦。

以下是它的样子： enter image description here

<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

如果你在谈论并排，你可以使用“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;
}

Answer 2

这是一本教科书“css floats 101”的问题。 哦，等等，我认为这是原创的，但这正是调用the article on alistapart的内容。你可以将图像放在引号/段落中并将其向右浮动 - 这几乎就是花车的内容在语义布局接管之前制作：）

<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”扩展父容器，以便浮动元素可以放入内部。从代码中删除它，看看（暂时）突出显示的容器是如何起作用的。

旁注...尝试添加更多段落并将图像移动到其中一个段落中。现在，“奇怪的”行为非常有意义 - 段落开始在漂浮的图像周围很好地流动而没有大的间隙。

小提琴：http://jsfiddle.net/EvdV8/另外：正确引用。另外：img是一个自动关闭元素，因此原始标记无效。

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

2 个答案: