如何将此文本移动到另一行

Question

我收到了这篇文章，我想转到另一行，

这就是现在的样子，

这就是我想要的，

HTML：

<div id="content">
    <div id="header">
        <p>
        <img class="header-image" src="http://www.nab.com.au/content/dam/nab/personal/credit-cards/apply-for-a-credit-card/images/icon-apply-online.gif" />
        <span id="header-text-1">Helo00oo To</span>
        <span id="header-text-2">FruitLand</span>
        </p>
    </div>
    <div id="body">
        <div id="body-title">Fruit Login</div>
        <div id="box-one"> Radio List with 2 radio buttons</div>
        <div id="box-two"> CheckBox</div>
        <div id="box-three">Textboxes x 2</div>
        <div id="body-footer">Textboxes x 2</div>
    </div>
</div>

CSS：

.header-image {
vertical-align: text-top;
}

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
}

如果你想尝试，这是FIDDLE - 应该适用于所有浏览器。

Answer 1

尝试使用position:relative。加上这个：

#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    position:relative;
    top:34px;
    left:-86px;
}

然后根据top和left规则

调整您的首选位置

DEMO

Answer 2

以下是怎样的。将图像显示为块，但将其浮动到左侧。通过向段落提供overflow:hidden来清除浮动。

将两个span元素显示为块，它们将一个在另一个下方排列，但仍然使用overflow:hidden再次清除图像：

#header p{
    overflow:hidden;
}
.header-image {
    vertical-align: text-top;
    display:block;
    float:left;
}
#header-text-1, #header-text-2{
    display:block;
    overflow:hidden;
}

根据需要填写<span>。

JSFiddle

Answer 3

请尝试并完成

#header
{
width:100%; 
    float:left ;   
}
.header-image {
vertical-align: text-top;
    float:left;
}
#header-text-1
{
       width:50%; 
    float:left;

}
#header-text-2{
    font-size: 2.6em;
    line-height: 0.8em;
    width:200px;
}

Answer 4

我喜欢Omar Sedki的解决方案。改进是：

.header-image {
    float:left
}
#header-text-2 {
    display:block;
}
#body {
    clear: left;
}

fiddle here

#body { clear: left;} 是保持＆＃34;水果登录＆＃34;在图像下