Question

我有一个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

我觉得这是一个愚蠢的问题，但我似乎永远不会得到正确的浮动。不应该将文本浮动到320px图像的右侧，假设屏幕宽度为500px，请将其直接显示在图像的右侧？

Answer 1

尝试添加

.addressText {
    display: block;
}

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

Answer 2

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

CSS：

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

.image {
    float: left;
}

HTML：

<img src="img/invoiceLogo.png" style="width: 320px;" class="image"/>

无法将文本块浮动到图像的右侧

2 个答案: