CSS: align text at bottom; YouTube video breaking border in Chrome_问答_开发者

CSS: align text at bottom; YouTube video breaking border in Chrome

开发者 https://www.devze.com 2023-03-06 08:34 出处：网络

The title needs to be at bottom of the text, and just above the video.The border for the wrapper is breaking near the bottom left corner (because of the YouTube video) when viewed in Chrome.

相关专题：css

The title needs to be at bottom of the text, and just above the video. The border for the wrapper is breaking near the bottom left corner (because of the YouTube video) when viewed in Chrome.

<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%;
       开发者_StackOverflow 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>

Just move

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

below the

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

but before the last