Question

好的，所以你们都会看到我对这个很新，我真的很想在这里得到我想要的东西。我想知道如何将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>

Answer 1

为包含youtube视频的div添加一些上边距会将其向下移动。不知道你想要多远，但你可以玩像素。

.eight{
margin-top: 10px;
}

我似乎无法弄清楚我的div youtube展示位置

1 个答案: