图像无法右对齐

Question

我正在修改html和CSS，这是wordpress主题的一部分：

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

我尝试删除上面所有的float left标签，但仍无法正常工作。

如何获得理想的结果？

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如果您希望它一直浮动到屏幕右侧...但是您绝对需要在.flavorText上添加float: left

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

Answer 4

不带标签尝试

因为它坏了

标语

使用范围

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