图像不会正确对齐答案

【问题标题】：image wont align right图像不会正确对齐
【发布时间】：2013-10-17 00:52:42
【问题描述】：

我正在修改作为 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; }

我已经尝试删除上面所有的浮动左标签，但仍然无法正常工作。

如何获得想要的结果？

【问题讨论】：

h1 标签没有设置宽度，所以默认应该到 div 的末尾，不留任何空间让图片漂浮在它旁边。尝试更改背景颜色以查看是否是这种情况。
您有两个选择：您将 .flavortext 向左浮动，或者将其设为内联。段落标签是一个占据整个宽度的块。

标签： html css

【解决方案1】：

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

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

.angledMan {
    float:left;
}

注意，如果你想得到这个结果，你需要float两个类到left。如果你想让 .angledMan 一直浮动到屏幕右侧，你可以将 .angledMan 更改为 float: right...但你肯定需要将 float: left 添加到 .flavorText

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

【讨论】：

差不多了，右边的图有点低。我尝试使用边距和填充将其调整得更高，但它不起作用。
现在检查小提琴：jsfiddle.net/VkDzV/1 图像很低，因为您没有将 HEADER (h1) 向左浮动，所以它采用了自己的路线......

【解决方案2】：

文本部分使用<div> 或 而不是，因为 会占用整行，请将其设置为float:left。

【讨论】：

一个 div 就像一个 p 标签一样是一个块......如果他想要内联任何东西，他可以覆盖它......（显示：内联）或向左浮动段落

【解决方案3】：

你要添加

float: left;

到你的 CSS，像这样：

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

.angledMan {
    float:right;
}

并正确关闭您的 标签。

【讨论】：

差不多了，右边的图有点低。我尝试使用边距和填充将其调整得更高，但它不起作用。

【解决方案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>

【讨论】：