我已经尝试了"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

float right的设计目的是做你想做的事-浮动的图片在右边，让任何文字不只是坐在左边，但它的下面流动，如果它太长

但是，当您绘制h2和div时已经太晚了，因为内容已经移动到新行。如果你把浮动放在它们前面，那么系统就会知道图像的空间，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>