问题描述
我正在使用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>