Question

我一直在尝试使用百分比来调整一些图片的高度。

HTML：

<div class="work">

   <div class="work_container" id="work_thumb" ontouchstart="this.classList.toggle('hover');">

      <div class="front">
         <a href="#"><img src="images/dummy1-01.png" border="0"></a>    
      </div>

      <div class="back">
         <a href="#"><img src="images/dummy2-01.png" border="0"></a>
      </div>

   </div>

</div>

CSS：

.work {
width: 84%;
height: 100%;
left: 8%;
position: absolute; 
}

.work_container{
position: relative;
top: 0;
left: 0;
-webkit-perspective: 10000;
-moz-perspective: 10000;
-o-perspective: 10000;
}

#work_thumb {
width: 20%;
height: 213px;
float: left;
display: inline;
-moz-transform: perspective(10000px);
-moz-transform-style: preserve-3d;
}

#work_thumb img{
width: 100%;
}

正如你所看到的，我正在使用213px的高度来使左边的图像很好地左对齐。但是，如果我使用百分比，图像只是彼此覆盖（如堆栈）。有什么方法可以解决这个问题吗？因为如果我使用像素，有时图片会在不同的屏幕尺寸下变形。

Answer 1

你需要增加work_thumb id的高度，或者你需要减少所需的图像尺寸，并为拇指添加边距和边距底部。我认为以下代码可以帮助你#work_thumb {width：20％; height：50％; margin-left：10px; margin-bottom：10px; float：left; display：inline;}

为第一行创建一个div（类似外部的类），类似于第二行，这样第一行包含4个图像，第二行也包含4个图像等等。比包括代码.outer：first-child {margin-left：0}这将设置边距为0，每行的第一张图片休息看起来会很好

图片不会使用百分比正确对齐

1 个答案: