【已解决】关于图片在Callouts中位置问题

[soulmate]

将图片放在Calloust标头位置时，默认位置是居中的，有什么办法可以让它居左或居右吗，例如下图
下图效果是使用插件Image Converter实现的，但有时候重新打开文件，效果会失效，有什么其他不失效的方法吗

[Azona77]

我这里沙盒库里默认是居左的，居右可以这样修改：

/* 内容为图片的callout标题 - 内容居右 */
.callout-title:has(img) {
    justify-content:space-between;
}

效果如下（左编辑右阅读）：

如何添加css脚本：【新手向教程】OB样式调整基础课：CSS入门科普

[Azona77]

好像理解错了楼主意思，楼主是不是希望单独把图片放在左侧或右侧，纵向排列标题和内容？

[soulmate]

就是如上图片展示的，将图片放在Callouts左侧，文字被“挤”到右侧排列这种，图片大小变化，文字排列空间变化

[Azona77]

@soulmate

将图片放在Calloust标头位置时，默认位置是居中的，有什么办法可以让它居左或居右吗，例如下图

建议表述清楚一些，文字和图片看不出关联性啊，默认也不是居中，是居左的

楼主预期的效果应该是“文字和图片左右排列”

[Azona77]

.callout-title-inner {
    display: flex;              /* 启用flex布局 */
    align-items: flex-start;    /* 图片与文字顶部对齐 */
    gap: 10px;                  /* 图片与文字的间距 */
    overflow-wrap: break-word; /* 当单词太长时换行 */
    word-break: break-word;    /* 兼容性处理 */
    white-space: normal;       /* 允许正常换行 */
}

效果如图：

如何添加css脚本：【新手向教程】OB样式调整基础课：CSS入门科普

[soulmate]

感谢感谢，我想实现的就是这种效果，麻烦了麻烦了