兄弟姐妹的CSS选择器

Question

对于我的网站，如果有可以显示的较大图像（如放大），则产品下方有一个放大镜，可将30px添加到容器的高度。所以现在，如果你有一个页面，其中一些图像没有更大的图像，缩略图将看起来不均匀。

HTML标记 -

<div class="parent">
    <a class="itemImage">
        <img src="someImage.jpg"/>
    </a>
    <a class="magnify"> <!-- This element is only generated if a larger image is available -->
        <img class="itemEnlarge" src="magnifyingGlass.jpg"/>
    </a>
</div>

所以这里是`someImage.jpg -

的最大尺寸

• 带放大镜：200px x 100px（WxH）
• 不带放大镜：200px x 130px（WxH）

是否可以根据是否生成someImage元素来设置magnify的高度？

我尝试了这个，但老实说，我甚至不知道这将适用于css属性。

.parent .itemImage + a .itemEnlarge{max-height: 100px;}

Answer 1

尝试设置相对于class =＆＃34; parent＆＃34;的位置。然后将绝对位置设置为a.magnify。绝对定位不占用空间，您应该能够在左侧，右侧，顶部和底部的位置进行定位。这将使有或没有放大镜的高度相同。如果那不起作用，请给我一个小提琴看一看。