Html CSS位置，图例旁边的图像

您好，我目前正试图在我的一张图片旁边放置一个图例，但我在放置方面遇到了问题

我想把图例放在图片的左边或右边。这是我当前的代码：

.my legend.legend title{
文本对齐：左对齐；
边缘底部：5px；
字体大小：粗体；
字体大小：90%；
}
.我的传奇.传奇比例ul{
保证金：0；
边缘底部：5px；
填充：0；
浮动：左；
列表样式：无；
}
.我的传奇.传奇规模ul li{
字号：80%；
列表样式：无；
左边距：0；
线高：35px；
边缘底部：2px；
}
.my legend ul.legend-labels li span{
显示：块；
浮动：左；
高度：26px；
宽度：40px；
右边距：15px；
左边距：0；
边框：1px实心#999；
}
.我的传说.传说来源{
字体大小：70%；
颜色：#999；
明确：两者皆有；
}
.我的传奇{
颜色：#777；
}

*颜色编码的主视图示例



可用
停放和装载
停放和卸载
停靠

这足够了吗

.my legend.legend title{
文本对齐：左对齐；
边缘底部：5px；
字体大小：粗体；
字体大小：90%；
}
.我的传奇.传奇比例ul{
保证金：0；
边缘底部：5px；
填充：0；
浮动：左；
列表样式：无；
}
.我的传奇.传奇规模ul li{
字号：80%；
列表样式：无；
左边距：0；
线高：35px；
边缘底部：2px；
}
.my legend ul.legend-labels li span{
显示：块；
浮动：左；
高度：26px；
宽度：40px；
右边距：15px；
左边距：0；
边框：1px实心#999；
}
.我的传说.传说来源{
字体大小：70%；
颜色：#999；
明确：两者皆有；
}
.我的传奇{
颜色：#777；
}
.集装箱{
显示器：flex；
}

*颜色编码的主视图示例



可用
停放和装载
停放和卸载
停靠

根据我的评论，以下是一些可以使用的方法：

• 浮动第一个

  img

  的基本示例（您显然已经尝试过了。它需要

  min width

  以避免缠绕）：

.my legend.legend title{
文本对齐：左对齐；
边缘底部：5px；
字体大小：粗体；
字体大小：90%；
}
.我的传奇.传奇比例ul{
保证金：0；
边缘底部：5px；
填充：0；
浮动：左；
列表样式：无；
}
.我的传奇.传奇规模ul li{
字号：80%；
列表样式：无；
左边距：0；
线高：35px；
边缘底部：2px；
}
.my legend ul.legend-labels li span{
显示：块；
浮动：左；
高度：26px；
宽度：40px；
右边距：15px；
左边距：0；
边框：1px实心#999；
}
.我的传说.传说来源{
字体大小：70%；
颜色：#999；
明确：两者皆有；
}
.我的传奇{
颜色：#777；
}
img{float:left；}
主体{最小宽度：600px；

*颜色编码的主视图示例



可用
停放和装载
停放和卸载
停靠

你试过类似于float或display的东西吗？@G-Cyrillus我把float弄得一团糟，但它没有让我明白，使用float，你可以设置第一个元素floating

img{float:left；}

，但您需要足够的空间才能看到它们并排放置，垂直对齐将不可用。显示：flex/grid甚至Table将更有效，您至少需要两个包装器，一个用于img，另一个用于文本。是的，但您能解释一下您更改了什么吗？我看到您添加了一个容器。谢谢您的帮助。我添加了一个容器，并向其添加样式

display:flex；

。然后我在另一个容器中添加了内容而不是图像。

display:flex；

使图像和第二个容器显示在一行而不是一列中。使用此CSS会将页面的其余部分意外地抛出，如图所示：其假设如下所示：是的，我怎样才能寄给你呢？让我们来。