图像不会对齐

Question

我正在修改作为wordpress主题的一部分的html和css：

<div id="featured_content">
<h1>Balance for Work and Life</h1>
<p class="flavorText">If it is having a physical impact on you or those around you, if it is weighing on your mind, affecting your emotions or stirring your spirit – whatever it is – if it is important to you, it’s important to us.<p>
<img class="angledMan" src="http://www.eap.zhi.com/wp-content/uploads/2013/10/angledman.png">
</div>

目前的情况如下：

我的问题是图片显示在文字下方，但我希望它显示在文字的右侧。

这是我的css：

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
}

.angledMan {
    float:right;
}

此外，这是wordpress主题的关联css：

#header #featured #left_arrow { float: left; background: url('images/featured_before.png') no-repeat top right; width: 34px; margin-left: 7px; padding-top: 110px; height: 217px;}
#header #featured #featured_content { padding: 19px 19px 19px 40px; float: left; background: #9ebadb; width: 902px; height: 280px;  color: #000; font-size: 1em; line-height: 1.6em;}
#header #featured #featured_content img { float: left; margin: 0 30px 0 0; }
#header #featured #featured_content h1 {line-height: 1.2em; font-size: 3em; margin: 0px 0 14px 0; font-family: Century Gothic; font-weight: normal; color: #fff; text-shadow: -2px -1px 0px #000; }
#header #featured #featured_content #spotlight { float: left; width: 500px; margin-right: 10px; }

我已经尝试删除上面的所有浮动左标签，但它仍然无效。

如何获得所需的结果？

Answer 1

使用<div>或<span>代替<p></p>作为文本部分，<p>消耗整行，将其设置为float：left。

Answer 2

您想要添加

float: left;

到你的CSS，就像这样：

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
    float: left;
}

.angledMan {
    float:right;
}

并正确关闭</p>代码。

Answer 3

您需要做的就是将您的CSS更改为：

.flavorText {
    margin-top:2em;
    text-align: center;
    width: 21em;
    font-size: 1.75em;
    color: white;
    float:left;
}

.angledMan {
    float:left;
}

请注意，如果您想获得此结果，则需要float两个类左。您可以将.angledMan更改为float: right，如果您希望它一直浮动到屏幕右侧...但您肯定需要将float: left添加到.flavorText

http://jsfiddle.net/VkDzV/1/

Answer 4

尝试没有标签

因为它打破了

标记行

使用span

<div id="featured_content">
<h1>Balance for Work and Life</h1>
<span class="flavorText">If it is having a physical impact on you or those around you, if it is weighing on your mind, affecting your emotions or stirring your spirit – whatever it is – if it is important to you, it’s important to us.</span>
<img class="angledMan" src="http://www.eap.zhi.com/wp-content/uploads/2013/10/angledman.png">
</div>