html - 我试过“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>

标签： htmlcsscss-float

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>