html - 在 WordPress 中并排放置两张垂直照片

Question

我想在我的 WordPress 网站上并排显示两张垂直照片。现在我通过为每张照片分配特定的类来做到这一点 - 这意味着我必须手动完成，将照片上传到 ftp 等，这让我很沮丧，可能有一些简单的解决方案...

所以现在我有类(class):.photo - 普通全宽照片.photo_left & .photo_right - 并排显示照片._photo_left_v & .photo_right_h(反之亦然)- 用于将垂直照片放置在水平照片旁边

我的 CSS 看起来像这样:

.photo_left, .photo_right {
width: 49.45%;
max-height: 663px;
}

.photo_left, .photo_left_v, .photo_left_h {
float:left;
}

.photo_right, .photo_right_v, .photo_right_h {
float:right;
}

.photo_left_v, .photo_right_v {
width:30.5%;
}

.photo_left_h, .photo_right_h {
width: 68.65%;
}

在 HTML 中它看起来像:

<img class="photo_left" src="site.com/gallery/001.jpg" />
<img class="photo_right" src="site.com/gallery/002.jpg" />

是的，它有效，而且很简单。但是当我必须管理像这样的画廊和博客文章时，这会花费大量时间并且让我感到沮丧:/

问题是:我可以通过 WP 上传照片并在 CSS 中处理宽度属性来做到这一点吗？我可以解决这个问题吗？

Answer 1

最好和最简单的方法是使用类似 flex box 的方法

HTML

<div class='images_container'>
    <img class="photo_left" src="site.com/gallery/001.jpg" />
    <img class="photo_right" src="site.com/gallery/002.jpg" />
</div>

CSS

 .images_container{
   display:flex;
   justify-content:center;
   align-elment:center;
 }
.images_container img{
   width:50%;
 }

JSFiddle demo