好的，正如你们所有人都会看到的那样，我对此非常陌生，并且真的很难在这里获得我想要的东西。我想知道如何将 youtube 视频在该 div 内向下推一点。无论如何，我确信这是一个简单的修复程序，我会为此进行扩孔，但我已经搜索并试图了解我做错了什么，但它就是行不通。这是我到目前为止所拥有的。
<html>
<head>
<meta charset="UTF-8">
<title>James Photo Tab</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
display: block;
}
article, div, h1, p {
margin: 0;
padding:0;
}
html {
background: url(images/grid.gif);
}
body {
width: 520px;
margin: auto;
background:white;
}
.one {
background:grey;
width:520px;
height:75px;
border-radius:15px;
position:relative;
}
.two {
background:#0000FF;
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left:px;
}
.three {
background: rgba(227,208,123,.6);
width: 50px;
height: 30px;
position: absolute;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:5px;
top:78px;
left: 424px;
}
div {
clear: both;
}
p{ height: 50px;
line-height: 50px;
}
.three { background:#33FFFF;
}
.four { width:520px;
height:auto;
background:grey;
border-radius:0px 10px 10px 10px;
position: absolute;
top:160px;
}
.five {width: 400px;
height:233px;
background:black;
top:250px;
}
.six {width:450px;
height:75px;
background:#0000FF;
top:750px;
border-radius:15px;
position:static;
margin:10px;
bottom: 10px;
}
.like {width: 200px;
height: 45px;
background:#33FFFF;
border-radius: 5px;
position:absolute;
top: 15px;
right: 40px;
text-align: center;
font-size: 2em;
}
.tab1 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position: absolute;
top:115px;
left:368px;
}
.tab2 {
width: 75px;
height: 45px;
float: left;
font-size: 1em;
font-weight: normal;
text-align: center;
border-radius:8px 8px 0px 0px;
background:grey;
position:absolute;
top:115px;
left: 445px;
}
/*add styles here*/
</style>
</head>
<body>
<article>
<div class="one">
<p>
<font size="10em" color="white">
BANNER IMG
</font>
</p>
<div class="like">
<p>
Like Counter
</p>
</div>
</div>
<h1 class="two">Share!</h1>
<h1 class="three">Like!</h1>
</article>
</body>
<body>
<article>
<h1 class="tab1"> Tab 1</h1>
<h1 class="tab2"> Tab 2</h1>
<div class="four" align="center">
<div class="five" align="center">
<div class="eight"><iframe width="400" height="233" top="50px" margin="40px" src="http://www.youtube.com/embed/ErkaM9IvZ7U" frameborder="0" allowfullscreen></iframe></div>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
<div class="six" align="center" onclick="location.href='http://www.facebook.com';" style="cursor:pointer;">
<p><font size="30em" color="white">Share Button</font></p>
</div>
</div>
</article>
</body>
</html>
最佳答案
向包含 youtube 视频的 div 添加一些上边距会将其向下移动。不确定你想要多远，但你可以玩弄像素。
.eight{
margin-top: 10px;
}
关于css - 我似乎无法弄清楚我的 div youtube 展示位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8995107/