0

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

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

我怎样才能得到想要的结果？

4

4 回答 4

1

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

于 2013-10-16T16:35:00.997 回答
1

你想添加

float: left;

到你的 CSS，像这样：

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

.angledMan {
    float:right;
}

并</p>正确关闭您的标签。

于 2013-10-16T16:37:27.570 回答
1

您需要做的就是将您的 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/

于 2013-10-16T16:38:42.543 回答
0

不带标签试试

因为它打破了

标语

使用跨度

<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>
于 2013-10-16T16:36:19.363 回答