WordpressdiviFlexbox对齐问题

如何解决WordpressdiviFlexbox对齐问题

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

我已将自定义CSS添加到该行：'display：flex; justify-content：“之间的空间”，适用于左侧图像模块，但右侧图像未完全推向右侧。

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

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

谢谢。

以下...

解决方法

根据您的标记进行检查并申请

如果“家中的柯里-第1卷” 和“家中的柯里-第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>

如果“家里的柯里-第1卷” 和“家里的柯里-第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>