Html 与段落相关的CSS图像对齐

所以我想给我的用户一个选项，上传一张图片，并将它放在文本中的一个段落中。我想提供的选项有：

因此，我解决这个问题的方法是在位置1、2、3以及6、7和8的所有图像之后添加一个清晰的元素。出于编辑方面的原因（用户应该能够更改“live”位置并直接查看结果），我希望完全删除clear元素，但仍然有这些选项。位置2、4、5和7没有问题，是左/右对齐的上方/下方造成了问题，我不知道如何解决这个问题。欢迎任何指点

.img{
宽度：100px；
高度：100px；
背景色：红色；
颜色：白色；
填充：10px；
}
.imgpos_1{
浮动：左；
边缘底部：1米；
右边距：1米；
}
.imgpos_2{
文本对齐：居中；
裕度：0自动1em；
}
.imgpos_3{
浮动：对；
边缘底部：1米；
}
.imgpos_4{
浮动：左；
右边距：1米；
}
.imgpos_5{
左边距：1米；
边缘底部：1米；
浮动：对；
}
.imgpos_6{
浮动：左；
边缘底部：1.5em；
}
.imgpos_7{
文本对齐：居中；
裕度：0自动1em；
}
.imgpos_8{
浮动：对；
边缘底部：1.5em；
}

1:在左边
2:结束，居中
3:在右边
4：文本左对齐
5：文本右对齐

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫莱斯蒂，弗林利亚猫，努克猫，自由女神。毛里斯·阿鲁特鲁姆·维利特。这句话的意思是：“我的天哪，我的天哪。”。莫里斯·维尼纳蒂斯（Mauris venenatis Elite eget nulla porta），ultricies ornare sem convallis。这是一个伟大的真理，它是一个伟大的真理。在congue eget magna quis aliquet。这是一个很好的例子。这是一个很好的例子。在塞德胡斯托，一个完整的欧盟议会和一个世仇制度。这是我的梦想。港口和其他港口暂停，港口和港口暂停。Morbi在tortor vel sem调味品rhoncus。孕妇在怀孕期间和分娩结束后都要坐在床上。

6:左下
7：在下面，居中
8:右下
1:在左边
3:在右边

拉齐尼亚相思酒店、索利西图丁酒店的nisl、埃尼姆拍卖行的埃尼姆酒后驾车。莫里斯·塞德·乌尔特里斯·多洛。库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库。无前庭静脉曲张，无症状。比本杜姆河豚。佩伦特斯式的口头禅。这句话的意思是：“你的建议是什么？”。这是一只猫。艾库利斯元素之谜。前庭静脉舌，laoreet molestie libero semper id。

更新您的代码，如下所示：

.img{
宽度：100px；
高度：100px；
背景色：红色；
颜色：白色；
填充：10px；
}
/*增加*/
身体{
文本对齐：居中；
}
p{
文本对齐：左对齐；
}
/**/
.imgpos_1{
浮动：左；
清除：左侧；/*已添加*/
边缘底部：1米；
右边距：1米；
}
/*增加*/
.imgpos_3+p，
.imgpos_1+p，
.imgpos_2+p{
明确：两者皆有；
}
/**/
.imgpos_2{
显示：内联块；/*已添加*/
裕度：0自动1em；
}
.imgpos_3{
浮动：对；
清除：对；/*已添加*/
边缘底部：1米；
}
.imgpos_4{
浮动：左；
清除：左侧；/*已添加*/
右边距：1米；
}
.imgpos_5{
左边距：1米；
边缘底部：1米；
浮动：对；
清除：对；/*已添加*/
}
.imgpos_6{
浮动：左；
清除：左侧；/*已添加*/
边缘底部：1.5em；
}
.imgpos_7{
显示：内联块；/*已添加*/
裕度：0自动1em；
}
.imgpos_8{
浮动：对；
清除：对；/*已添加*/
边缘底部：1.5em；
}

1:在左边
2:结束，居中
3:在右边
4：文本左对齐
5：文本右对齐

Lorem ipsum dolor sit amet，是一位杰出的献身者。莫莱斯蒂，弗林利亚猫，努克猫，自由女神。毛里斯·阿鲁特鲁姆·维利特。这句话的意思是：“我的天哪，我的天哪。”。莫里斯·维尼纳蒂斯（Mauris venenatis Elite eget nulla porta），ultricies ornare sem convallis。这是一个伟大的真理，它是一个伟大的真理。在congue eget magna quis aliquet。这是一个很好的例子。这是一个很好的例子。在塞德胡斯托，一个完整的欧盟议会和一个世仇制度。这是我的梦想。港口和其他港口暂停，港口和港口暂停。Morbi在tortor vel sem调味品rhoncus。孕妇在怀孕期间和分娩结束后都要坐在床上。

6:左下
7：在下面，居中
8:右下
1:在左边
3:在右边

拉齐尼亚相思酒店、索利西图丁酒店的nisl、埃尼姆拍卖行的埃尼姆酒后驾车。莫里斯·塞德·乌尔特里斯·多洛。库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库拉比图尔·库。无前庭静脉曲张，无症状。比本杜姆河豚。佩伦特斯式的口头禅。这句话的意思是：“你的建议是什么？”。这是一只猫。艾库利斯元素之谜。前庭静脉舌，laoreet molestie libero semper id。

用户如何改变位置，决定他们想要哪一个？为什么在网格布局中错误地使用float hack？为什么不首先简单地使用css网格呢？甚至Flexbox也可以完成这项工作。@battaboombattabaam使用表单或单击图像并在弹出窗口中从上面的图形中进行选择。不确定他们使用的方法是否重要…@tacoshy Cool，使用grid/flex向我展示上述html的JSFIDLE，以实现最终的图形结果您不想修改html吗？