Question

我在这里遇到一个奇怪的问题..

这是我的CSS：

#rightimage img {
 max-width: 10%;
}

#mainbox {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 width: 56%;
 margin-top: 20px;
}

#container {
 margin-left: 11%;
}

#rightimgage {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 position: absolute;
 right: 12%;
 min-width: 25px;
 max-width: 28%;
 margin-top: -0.5%;
}

#rightimgage2 {
 background: #fff;
 box-shadow: 0px 3px 12px 2px #000;
 padding: 10px;
 position: absolute;
 right: 83px;
 width: 285px;
}

#cssmenu li {
 display: inline-block;
}


.rotate {
 -webkit-transition: all 0.5s ease-out; 
 -moz-transition: all 0.5s ease; 
 -o-transition: all 0.5s ease;
}

.rotate:hover {
 -webkit-transform: rotate(-7deg); 
 -moz-transform: rotate(-7deg); 
 -o-transform: rotate(-7deg); 
}

这是我的HTML：

<div id="rightimgage" style="top: 247px;" class="rotate">
<img src="http://#.x10.bz/image1.png" />
</div>

<div id="rightimgage" style="top: 650px;" class="rotate">
<img src="http://#.x10.bz/image2.png" />
</div>

<div id="rightimgage" style="top: 1053px;" class="rotate">
<img src="http://#.x10.bz/image3.png" />
</div>

<div id="rightimgage" style="top: 1456px;" class="rotate">
<img src="http://#.x10.bz/image4.png" />
</div>


<div id="mainbox">
<p>RANDOM TEXT HERE...</p>
</div>

在1024 x 768屏幕分辨率下，它显示如下：http://prntscr.com/88c4tj 如您所见，彼此相邻的两个div是相同的高度。

然而，在1366 x 768屏幕分辨率下，它看起来像这样：http://prntscr.com/88c6ab 如您所见，图像的分辨率高于1024 x 768分辨率。

如何解决此问题，因此所有分辨率下的图像都相同？

Answer 1

可能它是margin-top: -0.5%;中的#rightimgage。该值是width的-0.5％。所以它会在更广泛的屏幕上改变。有关更多帮助，请参阅this question：您应该使用top: -0.5%;代替。但是你必须关心style="top: 247px;"，它会覆盖css文件中的值。

给你一个tipp：
您应该使用rightimgage的类。大多数浏览器都理解您的解决方案，但它没有正式有效; - ）

根据屏幕尺寸改变高度

1 个答案: