Wordpress（divi）Flexbox对齐问题答案

【问题标题】：Wordpress (divi) Flexbox alignment problemWordpress（divi）Flexbox对齐问题
【发布时间】：2020-09-28 10:32:44
【问题描述】：

我正在使用 Wordpress（Divi 主题页面构建器），我正在尝试使用 flexbox css 水平对齐两个图像模块，每个模块在一行中的单独列中，以便一个出现在左侧，一个出现在右侧.

我在行中添加了自定义 CSS：'display: flex; justify-content: space-between' 适用于左侧图像模块，但右侧图像未完全推到右侧。

请参见下图作为示例。我试过摆弄许多设置，但没有任何帮助。 Example of Problem

该页面目前在我的网站 (www.mistyricardo.com) 上是私有的，但如果需要，我可以将其公开以供检查。

提前谢谢你。

以下...

【问题讨论】：

标签： css wordpress flexbox divi

【解决方案1】：

根据你的标记检查并应用

如果 'Currey at home - Volume 1' 和 'Currey at home - Volume 2' 书籍在同一个容器中：

.book-wrapper {
     display: flex;
     justify-content: space-between;
}

/* this is for demo only - ignore the below */
img {
    height: 150px;
}

<div class="banner-header">
   <div class="book-wrapper">
      <img src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
      <img  src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
   </div>
</div>

如果 'Currey at home - Volume 1' 和 'Currey at home - Volume 2' 书籍不在同一个容器中：

.banner-header {
    display: flex;
}

.book-img {
    margin-left: auto;
}

/* this is for demo only - ignore the below */
img {
    height: 150px;
}

<div class="banner-header">
   <div class="book-wrapper">
       <img class="book-img" src="https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1548876269l/43791788._SY475_.jpg" />
   </div>
   
   <img class="book-img"   src="https://upload.wikimedia.org/wikipedia/en/f/f4/Gangsta_Granny_Cover.png" />
</div>

【讨论】：

非常感谢贝基。在阅读您的回复之前，我正在尝试一些事情，并使用 float:left 和 float:right 达到了预期的结果。非常感谢您的解决方案，再次感谢。