如何在HTML/CSS中将图像移动到文本旁边？

我在尝试一些东西。我需要右边的仪表（彩色条）和左边的文字。问题是仪表没有超过文本。我的意思见下图：

标题
@字体{
字体系列：“fontbold”；
src:url（'akzidenz-grotesk-bold-webfont.woff2'）格式（'woff2'），
url（'akzidenz-grotesk-bold-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
@字体{
字体系列：“fontregular”；
src:url（'akzidenz-grotesk-light-webfont.woff2'）格式（'woff2'），
url（'akzidenz-grotesk-light-webfont.woff'）格式（'woff'）；
字体大小：正常；
字体风格：普通；
}
h1{
文本对齐：左对齐；
字号：4em；
颜色：#000000；
边缘底部：.3em；
左边距：1米；
字体系列：字体粗体；
}
氢{
文本对齐：左对齐；
字号：3em；
颜色：#000000；
边缘顶部：1米；
左边距：1.4em；
字体系列：fontregular；
}


标题
无名氏

您可以通过使用flex实现这一点。要使图像与文本的右侧对齐，它们应位于同一容器中。使用flex的

justify content

属性使项目位于开始和结束位置

h1{
文本对齐：左对齐；
字号：4em；
颜色：#000000；
边缘底部：.3em；
左边距：1米；
字体系列：字体粗体；
}
氢{
文本对齐：左对齐；
字号：3em；
颜色：#000000；
边缘顶部：1米；
左边距：1.4em；
字体系列：fontregular；
}
.集装箱{
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
}

标题
无名氏

图像不会与文本对齐，因为

和

是块元素。您必须使它们

显示：内联块将图像与文本对齐。
使用您自己的布局可能最简单的方法是在图像中添加一个浮点数。问题是您需要更改元素的顺序




标题
无名氏

下面是一个带有代码段的类似结构的示例



测试标题asd pgoasdkg opaskg paskdgpo askdgpo askdgpo KASDPOGKPOASDK gpoasdkg PAOSDKG OASDKG OASDKG OASDKG OASDKG OASDKG kaspodgk aspodgk aspodgk aspodgk APOSODKG PAOSDPKG kaspodgk ASPODG ASPODG ASPODG ASPODG ASPODG ASPODG aspod GKPAOSDKG
Lorem ipsum dolor sit amet，是一位杰出的献身者。帕雷森特·帕特·尼西。Nam Consequeat nulla quis nisi frongilla，在iaculis augue accumsan。前自由主义者是非自由主义者。在奥里乌特精英非特里斯蒂克。维韦拉大酒店。菲舍勒斯是一个港口的内克。在拉齐尼亚a的佩伦特斯克莱克塔斯·迪亚姆、埃吉斯塔斯、特里斯蒂克·奎斯·托托。亨德雷特·达皮布斯（hendrerit dapibus）的维瓦摩斯·普莱拉特·阿库（Vivamus Placelat arcu）。整型非虹膜前庭，舌苔，颞板

在maximus odio mauris中，semper eleifend tellus auctor a。Nunc suscipit Concertetur felis，一种accumsan velit发酵罐。在拉奥里特，我们的生活充满了神秘色彩。普尔文纳尔·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉·努拉。二是矢状花序-舌苔。发酵库拉索菌。这是一家名为Duis ullamcorper elit nec eros sollicitudin的公司，该公司是一家名为ultrices mauris imperdiet的公司。Donec ornare aliquam velit vitae accumsan

纳勒姆是亨德雷特·维利特。苏打玉米饼维生、菲尼伯斯精英和比勒蒂姆马萨。虎口浮雕和肘部浮雕同侧前庭；这是一辆汽车。不必担心，因为这是一个秘密。佩伦特斯式的连续性、国际性的平等性、共同性的平等性、自由的平等性。我的名字叫尼西·奎姆，我的名字叫洛博蒂·韦尔斯，我的名字叫莫利斯·埃拉。这是我的宿命，我的宿命，我的宿命

莫比·阿莱克托斯·马萨。Nunc精英Nunc、lacinia ut mauris ut、euismod molestie magna。Maecenas id facilisis neque。莫比·索达莱斯·奥古斯特·阿梅特·马蒂斯·布兰迪。nisi convallis的pharetra risus Vivamus，sed ornare nunc pharetra。这是一种生活方式，是一种交通工具。维瓦摩斯·厄洛斯·多洛，调味品和温和的非调味品，无调味品。杜伊斯和奥古斯·莫里斯。在《浮世记》中，爱神之手在康莫多。莫里斯·亨德雷特·莫里斯·尼布（Mauris hendrerit Mauris nibh），在利奥·拉奥里特·内克（leo Laoret nec）的阿利夸（aliquam）。佩伦茨克·奥纳·塞德·乌纳在阿利夸姆。发酵剂

在尼斯尔-萨皮恩（accumsan-nisl-sapien）中，nec venenatis felis aliquam和Etiam accumsan varius neque，欧盟placerat-nisl-suscipit-vel。双相色差，连续色差，有效色差。海象：海象、海象、海象、海象。马莱苏阿达圣公会贵宾。这是我的名言。莫里斯·维尼纳提斯·萨皮恩在阿库姆桑火山口。整数间隔是一个空白。萨吉提斯·亨德雷特是我的小朋友

试试这个，它应该适合你。如果它似乎不起作用，将剩余的填充从95em减少到屏幕大小

<span>
   <h2 style="display:inline;">john doe</h2>
   <img src="Meter.png" style="padding-left:95em"/>
</span>


无名氏

输出看起来像

谢谢。我不知道你可以直接使用“margin:wxyz”@HenryHudson我在margin上添加了更多的信息，这样你就可以参考它的工作原理。