如何使用内联样式显示Flex

Question

我不能使用CSS来设计这篇文章的样式。这与在谷歌地图Api地图中工作有关。所以我必须使用内联样式来完成我需要的任务。我想并排显示图像和文本，但是，我无法成功实现display flex。如有任何帮助，我们将不胜感激！

尝试的显示内联样式：Flex

content.push('<div style={{display: flex}}><img id="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');

代码

var content = [];
content.push('<h1>Icon Legend</h1>');
content.push('<img id="legend-icon" widht="25" height="25" src="' + lights + '"><p>Lights in Sky</p>');
content.push('<img id="legend-icon" width="25" height="25" src="' + alien + '"><p>Alien Sighting</p>');
content.push('<img id="legend-icon" width="25" height="25" src="' + ufo + '"><p>Abduction</p>');
content.push('<img id="legend-icon" width="25" height="25" src="' + redBlur + '"><p>Sighting within last week</p>');
content.push('<img id="legend-icon" width="25" height="25" src="' + greenBlur + '"><p>Sighting within last month</p>');
content.push('<img id="legend-icon" width="25" height="25" src="' + blueBlur + '"><p>Sightings over a month</p>');

Answer 1

您可以尝试创建一个属性为style = "display: flex; flex-wrap: wrap;"的<div>标记(包含所有<img>子标记)

之后，您可以将content放入

您可以将style = "display: flex; flex-wrap: wrap;"替换为style = "display: flex; flex-wrap: nowrap;"，如果您想要内容显示在一行上。

例如：

<div style = "display: flex; flex-wrap: wrap;">
//push html of content[] here
</div>

最后，如果您有多个内容的<img>标签，并且您想为所有内容创建css，则应该使用class = "legend-icon"而不是id = "legend-icon"

Answer 2

您应该使用常规的html语法：

content.push('<div style="display:flex"><img className="legend-icon" width="25" height="25" src="' + lights + '"><p>Lights in Sky</p></div>');