Question

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

所以现在我有课： .photo - 适用于普通全宽照片 .photo_left＆amp; .photo_right - 并排放置照片 ._photo_left_v＆amp; .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属性吗？我可以解决这个问题吗？

Answer 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

两张垂直照片在WordPress中并排显示

1 个答案: