WordPress中并排的两张垂直照片答案

【问题标题】：two vertical photos side-by-side in WordPressWordPress中并排的两张垂直照片
【发布时间】：2016-06-21 09:33:41
【问题描述】：

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

所以现在我有课： .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 中处理 width 属性来做到这一点吗？我可以解决它吗？

【问题讨论】：

标签： html css wordpress gallery photo

【解决方案1】：

使用像这样的弹性盒方法的最佳和简单的方法

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

【讨论】：