0

我有一个 310 像素宽 x 128 像素高的图像。我有一块文本要浮动到它的右侧。

像这样，其中 X 是图像，Y 是文本

XXXXXXXXX  YYYYYYYYY
XXXXXXXXX  YYYYYYYYY
XXXXXXXXX  YYYYYYYYY

我已经尝试了很多东西，但这是我认为肯定会奏效的尝试。 

<html>
<head>
    <style type="text/css">
        hr {
            border: 0;
            width: 80%;
            color: #347fb9;
            background-color: #347fb9;
            height: 5px;
        }
        .addressText {
            font: Lucida Grande;
            color: black;
            font-size: large;
            float: right;
        }
    </style>
</head>
<body>
    <hr />
    <img src="img/invoiceLogo.png" style="width: 320px;" />

    <p class="addressText">
Lorem ipsum dolor sit amet<br />
consectetur adipiscing elit<br />
Donec purus urna, dictum<br />
sed egestas mattis, aliquet
    </p>

    <hr />
</body>
</html>

这只是产生以下

XXXXXXXXXXXX
XXXXXXXXXXXX
XXXXXXXXXXXX
YYYYYYYYYYYY
YYYYYYYYYYYY
YYYYYYYYYYYY

我觉得这是一个愚蠢的问题，但我似乎永远无法正确使用花车。考虑到屏幕是 500px 宽，不应该将文本浮动到 320px 图像的右侧，让它直接显示在图像的右侧？

4

2 回答 2

0

尝试将两个元素都向左浮动（我向 img 添加了一个类）：

CSS：

.addressText {
    padding-left: 20px;
    float: left;
}

.image {
    float: left;
}

HTML：

<img src="img/invoiceLogo.png" style="width: 320px;" class="image"/>
于 2013-08-07T22:23:49.313 回答
0

尝试添加

.addressText {
    display: block;
}

如果窗口太小而无法将其放在图像的右侧，它仍然会将文本推到底部，但如果它足够大，它应该接近您想要的。

于 2013-08-07T22:15:40.963 回答