Question

所以，我正在努力在我的网站上创建一个“链接”div。（reference here)链接都是图像，但由于某种原因，它们所包含的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;
}

链接比图像长

2 个答案: