我正在尝试复制类似于 Youtube 的布局来练习我最近学到的一些东西。如何重新定位嵌入的 Youtube 视频?
我尝试使用 为嵌入式视频制作父 div display: relative
,但它并没有让步。
<!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&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&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;
}