0

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

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

有关示例，请参见下图。我试过摆弄许多设置，但没有任何帮助。 问题示例

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

先感谢您。

下列的...

4

1 回答 1

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>

于 2020-09-28T10:58:51.717 回答