Question

我正在尝试重现类似于Youtube的布局来练习我最近学到的一些东西。如何重新定位嵌入式Youtube视频？

我尝试使用display: relative为嵌入视频制作父div，但它并没有让步。

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="bluetube.css" /> <title> Webpage #3 </title>
</head>

<body>
<div id="header">                       <!-- Top header with logo, search bar, upload button-->
    <a href="http://www.youtube.com" id="logo">
        <div id="blue"> Blue</div>
        <div id="tube">Tube</div>
    </a>
    <form  style="display: inline; width: 200px;" name="searchbar" action="searchinput.asp" method="get">
            Search <input type="text" name="searchinput">
            <input type="submit" value="Submit">
    </form>
    <a href"http://www.amazon.com" id="uploadparent">
        <div id="upload">Upload</div>
    </a>


</div>


<div id="videobox">
    <object width="420" height="315">
    <param name="movie" value="http://www.youtube.com/v/dQw4w9WgXcQ?    hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true">
    </param><param name="allowscriptaccess" value="always">
    </param><embed src="http://www.youtube.com/v/dQw4w9WgXcQ?hl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true">
    </embed></object>

</div>

<div id="column_box_right"></div>     <!-- Related Videos spans the Right side! -->
<div id="column_box_left>ddddddddddddddddddddddd</div>      <!-- column spans the left side! -->
<div id="vidinfo"></div>

<div id="footer"></div>

CSS：

html body {
width: 100%;
}

#header {
    height: 35px; 
    background-color: grey;
    margin-top: -6px;
    position: relative;
    margin-left: -7px
    overflow: auto;
    min-width: 1000px;
}

#blue {
    height: 35px;
    width:  60px;
    background-color: grey;
    border-radius: 4px;
    text-align: center;
    color: blue;
    display: inline-block;
    font-size: 20px;
    font-family: Verdana;
}
#logo {
    float: left;
    margin-right: 14%;
}
#tube {
    height: 35px;
    width:  60px;
    background-color: blue;
    border-radius: 4px;
    text-align: center;
    display: inline-block;
    color: white;
    font-size: 20px;
    font-family: Verdana;
}
#upload {
    height: 30px;
    width: 100px;
}

Answer 1

#videobox div中有一个额外的空格。将其从#video box更改为#videobox，可让div在您的jsfiddle中正确定位。我不确定这是否是您网站上的问题，但由于大多数复制和粘贴，我想我会把它扔出去。

Answer 2

这会将你的视频框div移动到你想要的屏幕上。这将把它移到中心。

#videobox {
display: block;
height: 100%;
left: 25%;
position: absolute;
top: 25%;
width: 100%;

}

通过CSS定位嵌入式视频

2 个答案: