高度随屏幕大小而变化

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>

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

然而，在1366x768的屏幕分辨率上，它看起来是这样的：http://prntscr.com/88c6ab正如你所看到的，图像的分辨率比1024x768的分辨率要高得多。

我如何解决这个问题，这样图像在所有分辨率下都是相同的高度？

Answer 1

也许是你#rightimgage里的margin-top: -0.5%;。此值为width的-0.5%。所以它会在更宽的屏幕上改变。有关更多帮助，请参阅this question：您应该改用top: -0.5%;。但是，您必须注意style="top: 247px;"，它覆盖了css文件中的值。

再给你一杯小费：

您应该为rightimgage使用一个类。大多数浏览器都能理解您的解决方案，但它不是正式有效的;-)