gpt4 book ai didi

CSS:在底部对齐文本; YouTube 视频在 Chrome 中打破边界

转载 作者:行者123 更新时间:2023-11-28 14:40:29 24 4
gpt4 key购买 nike

标题需要在文本的底部,视频的正上方。在 Chrome 中查看时,包装器的边框在左下角附近断开(由于 YouTube 视频)。

<head>
<style type="text/css">
body{font:15px arial,sans-serif;}

img{border-style: none;}

a:link {color:#0000FF;} /* unvisited link */
a:visited {color:#0000FF;} /* visited link */
a:hover {color:#0000FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */

#title{
font-size:130%;
vertical-align:bottom; /*What am I doing wrong here? */
white-space:nowrap;
}

#arrows{
float:left;
margin-top:25px;
margin-left: 25px;
}
#list{
float:right;
margin-right:60px;
}
#wrapper{
width:300px;
border: 10px solid orange; /*Why is the YouTube video breaking this when viewed in Chrome? */
}
#video{
margin:20px;
}
</style>

</head>


<body>
<div id="wrapper">
<div id="arrows">
<br />
<a href="javascript:down()"><img src='img/up.png'></a><br />
<a href="javascript:up()"> <img src='img/down.png'></a>
</div>
<div id="list">
<ul>
<li><a href='...' id='0' >zero</a></li>
<li><a href='...' id='1' >one</a></li>
<li><a href='...' id='2' >two</a></li>
<li><a href='...' id='3' >three</a></li>
<li><a href='...' id='4' >four</li>
<li><a href='...' id='5' >five</a></li>
</ul>
</div>
<div id='title'>Beginner Tutorial 1</div>

<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>
</div>
</body>
</html>

最佳答案

只是移动

<div id='title'>Beginner Tutorial 1</div>

之下
<div id='video'><embed style="width:260px; height:176px;" id="VideoPlayback" type="application/x-shockwave-flash" src="http://video.google.com/googleplayer.swf?docId=4204540069740232845&hl=en" flashvars=""> </embed></div>

但在最后一个之前

</div>    

发生这种情况是因为您的其他元素是 float 的,因此在文档流之外。

编辑:顺便说一下,我在 Chrome 中没有看到边框问题。

编辑 #2:要将 div id-title 放在视频上方,请在标题上方添加以下行:

<br style="clear:both;" />

关于CSS:在底部对齐文本; YouTube 视频在 Chrome 中打破边界,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6034544/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com