如何将图像放在文本旁边的右侧？ [复制]答案

【问题标题】：How do i place the image on the right beside the text? [duplicate]如何将图像放在文本旁边的右侧？ [复制]
【发布时间】：2020-04-23 14:53:41
【问题描述】：

我在尝试将图像放在右侧并将文本保持在左侧时遇到了一些麻烦，而它始终居中。我正在使用 inline-block 但它似乎没有帮助。这就是我想要的样子。

这就是我得到的

这是 HTML：

<div class="hosting">
    <h1 >Lorem, ipsum.</h1>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, soluta.</br>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dignissimos, facere!<br>
        Lorem ipsum dolor sit amet consectetur adipisicing.<br>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.</br>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Debitis, blanditiis.
    </p>
    <img src="images/illustration.png" alt="hosting" class="hosting-img"> 
</div>

这是css：

.hosting-img {
    height: 300px;
}
.hosting {
    width: 100%;
    height: 100%;
    margin-top: 150px;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    text-align: center;
}

【问题讨论】：

标签： html css

【解决方案1】：

尝试将此添加到您的样式中

p {
    display: inline-block;
}

【讨论】：

【解决方案2】：

一种选择是设置.hosting div 中每个元素的宽度。

.hosting-img {
    height: 300px;
    width: 50%;
}
.hosting p {
    width: 50%;
}
.hosting {
    width: 100%;
    height: 100%;
    margin-top: 150px;
    align-items: center;
    justify-content: center;
    position: relative;
    display: inline-block;
    text-align: center;
}

要获得更强大、响应更快的解决方案，您可以查看float 属性或flexbox。

【讨论】：