Question

我正在使用DreamWeaver从头开始构建网页（无模板）。这是一个学校项目。

在我尝试嵌入YouTube视频之前，我的DIV格式正常。为什么我的YouTube视频直接停留在标题下方？此外，页面右侧的DIV /表也没有问题。它只需要左边的YT视频和右边的桌子，我希望它们水平排列。

感谢您的帮助。 Click to view the Webpage, with obvious errors.

CODE：

HTML -

<!DOCTYPE>

<html>

<head>

<link rel="stylesheet" type="text/css" href="FamilyBookMain.css">

</head>

<title>FamilyBook.com</title>

<body>
<div id="top">
</div>

<div class="video-container">
    <iframe width="560" height="315" src="//www.youtube.com/embed/MQgdE1_lHnA?rel=0" allowfullscreen></iframe>
       <div class="famtree">
<img src="images/fambooktree.png" width="705" height="221"/>   
    </div>
 </div>



<div id="body">
   <table style="border-collapse:collapse;">
        <thead>

<h1>Your Ancestors Are Dead.</h1> 
<h1>But Here, They're Still Alive.</h1>
            <br>

        </thead>

        <tbody>
            <tr>
                <td style="padding:10px"> 
                <p class="table"><br>Welcome to the world's <strong>largest</strong> online resource for social media profiles and data from the twenty-first century. FamilyBook.com is home to billions of profiles from MySpace, FaceBook, Twitter, Instagram, and more. <br> <br> 
                We are the <strong>leading provider of social media data</strong> from the early 2000s, including searchable image tags, status updates, relationship histories, friendships and family networks. Our mission is to link people to the personal histories of their ancestors- one social media profile at a time.</p></td> </tr>

               <tr><td style="padding:10px">
                <p class="table">
                Imagine the stories that you'll uncover as you explore your loved one's Facebook timeline and likes, private messages and chat logs, Twitter conversations, and Instagram uploads. The <strong>secrets</strong> that you uncover may even surprise you.<br>

               <br> Simply start with a name and <strong>we'll do the rest.
                </strong> Discover your ancestor's past. Learn where you came from. <br> 
                </p></td>     
            </tr>
        </tbody>
           <thead>
            <tr>
                <th class="head" colspan="2">
                <strong>Our services are coming soon!</strong><br><br>

            </tr>
        </thead>
    </table>
    </div>   


<div class="footer">
<p id="footer"><img src="http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png" width="139" height="25"/>
<br>Jessica E. Tompkins 2014 | <a href="http://en.gravatar.com/jesstompkins"> About</a>
</p>
</div>


</body>

</html>

CSS -

@charset "UTF-8";
/* CSS Document */

body {
background-color:#EEEEEE;
position: fixed;

}

#top {
width: 100%;
height: 60px;
background-   image:url('http://img.photobucket.com/albums/v483/CrazyInsaneJess/familybook.png');
background-color:#FFF;
background-repeat:no-repeat;
background-position:60px bottom;
border-bottom-width:thin;
border-bottom-color: #333;
border-bottom-style:solid;
position: fixed;
top: 0px;
}

#body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: relative;
left: 650px;
bottom: 215px;
}

h1 {
color: #333;
font-family: Arial, Verdana, sans-serif;
text-align: center;
margin: 0px;
top: 10px;
position: relative;
}

.video {
position: relative;
left:170px;
top: 170px;
}


ul.crap {
color: #333;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
}

#video {
color: #99aacc;
font-family: Arial, Verdana, sans-serif;
text-align: center;
height: 200;
width: 450;
margin: 350px 0px 0px;
position: absolute;
}

.table {
font-family:Arial, Helvetica, sans-serif;
text-align:left;
font-size:14px;
color: white;
}

.head {
color: #333;
font-family: Verdana, Geneva, sans-serif;
font-size:16px;
padding: 15px;
font-weight:100;
}

.footer{
width: 100%;
height: 60px;
background-color: #99aacc;
border:1px solid #333;
position:fixed;
bottom:0px;
}

#footer{
font-family:Arial, Helvetica, sans-serif;
font-size:9px;
padding:5px;
color: white;
text-align:center;
}

a {
text-decoration:none;
}

Answer 1

首先，欢迎来到StackOverflow。我只花了大约一分钟来查看和编辑你的代码，但我想我得到了你想要做的事情的要点。请参阅以下代码：

更改您的#body元素以匹配以下代码:(我绝对定位了div。）

  #body {
width: 550px;
height: 400px;
background-color: #99aabb;
text-align: right;
margin: 10px;
position: absolute;
left: 650px;
top:65px
}

将其粘贴到CSS中：

.video-container{
    width:auto;
    height:auto;
    margin-top:75px;

}

现在，让我说你的HTML有点乱，可以简化一点。正如@Havard Brynjulfsen指出的那样，有一些ID和类仍未使用。在任何情况下，上面的代码都应该产生预期的结果，但如果您愿意更改HTML结构，那么您尝试做的事情可以更优雅地完成。

此外，HTML中存在一些错误。我强烈建议您使用官方W3C validator验证您的代码。

我有太多的问题要在这里列出，而不是偏离主题，但这里有大佬：

您的doctype声明不正确，应为<!DOCTYPE html>。
您的<title>应位于文档的<head>。

嵌入HTML YouTube视频;显示不正确

1 个答案: