我试过 "float" 和 "margin-top" 但图像与文本不对齐

Question

我正在制作一个产品着陆页，我正在努力使它的右侧有一个带有图像的段落。我输入 float: right; 但它似乎不起作用。不过它适用于我的导航栏。

代码如下：

.device {
width: 400px;
height: 500px;
margin-bottom: 0x;
float: right;
}

<div class="info">
<h2 id="the-benefits" class="info-header">The benefits<h2>
<p id="the-benefits"> Text about benefits.</p>
<img class="device" src="image.jpg" alt="text">
</div>

Answer 1

向右浮动旨在满足您的需求 - 将图片浮动在右侧，让任何文本不仅位于其左侧，而且如果文本太长则在其下方流动。

但是，当您绘制 h2 和 div 时，为时已晚，因为内容已移至新行。如果你把浮动放在它们前面，那么系统知道 space 允许图像和 h2 和 div 将坐在它的左边。

.device {
width: 400px;
height: 500px;
margin-bottom: 0x;
float: right;
}

<div class="info">
<img class="device" src="https://picsum.photos/id/1015/400/300" alt="text">
<h2 id="the-benefits" class="info-header">The benefits<h2>
<p id="the-benefits"> Text about benefits.</p>
</div>

我试过 "float" 和 "margin-top" 但图像与文本不对齐

I've tried "float" and "margin-top" but the image will not align with the text

html

css

css-float