image - 比图片长的链接

Question

所以，我正在我的网站上制作一个“链接”div。（参考这里）链接都是图像，但由于某种原因，它们包含的 div 不必要地长。图像应该是现在的三倍左右，但是每当我调整 div 的大小以使其更大时，它都会与视频重叠并将其向下推。

代码如下所示：

<div class="links">
    <ul>
        <li><a href="http://music.papkeeproductions.com"><img src="Images/button_home.png" width="52%" height="69" style="width:15%;height:auto;" /></a></li>
        <li><a href="http://papkee.bandcamp.com"><img src="Images/button_music.png" style="width:15%;height:auto;" /></a></li>
        <li><a href="http://papkeeproductions.com"><img src="Images/button_films.png" style="width:15%;height:auto;" /></a></li>
    </ul>
</div>
<div class="player">
    <iframe src="http://www.youtube.com/embed/MTmUnOHs5Xs"></iframe>
</div>

和CSS

.links {
float:left;
width:100%;
margin-left:0;
height:auto;
}
.links ul {
list-style-type:none;
margin:0;
padding:0;
}
.links img {
width:180px;
height:auto;
}
.player {
float:right;
padding:8px;
border-style:solid;
border-radius:31px 31px;
border-color:rgb(45,25,11);
border-width:2px;
margin-right:0;
width:45%;
height:45%;
}
.player iframe {
width:100%;
height:100%;
border:none;
}

那怎么办？我的吉米一整天都在沙沙作响，我似乎找不到问题所在。

谢谢！

Answer 1

为什么 .links 的宽度为 100%，将其更改为 30% 可防止视频下推。这是更改http://codepen.io/hwatkins/pen/qmzEB的示例

Answer 2

位于标签中的样式属性将覆盖样式表：

style="width:15%;height:auto;"

优先于：

.links img {
    width:180px;
    height:auto;
}