Question

标题必须位于文字底部，并位于视频上方。在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>

Answer 1

移动

<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>

这是因为您的其他元素已浮动，因此不在文档流中。

编辑：我没有在Chrome中看到边框问题，BTW。

编辑＃2：要将div id-title放在视频上方，请在标题上方添加以下行：

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

CSS：在底部对齐文本; YouTube视频突破Chrome界限

1 个答案: