Question

我对css，divs以及介于两者之间的一切都很陌生。

所以，我为我的乐队创建了一个基本布局，不想要一堆无用的链接，比如bio，merch store等等。所以我决定为我们的视频，播放器和Facebook窗口安排单独的空间。

我设法为youtube iframe创建一个div，但是当我调整窗口大小时，我无法让它保持原位。我已经尝试过多次将定位改为绝对，固定，相对......等等。没有运气。

请记住，布局没什么特别的，只是快速查看，并获得乐队的一些基本信息。

以下是链接：http://silentcellmusic.com/test.html

提前谢谢！

Answer 1

首先，您应该从标记中删除图像，并将其设置为正文的背景，例如html。将其设置为顶部中心。

然后，将div #wrapper设置为{width：960px;保证金0自动; }。这样它总是在屏幕的中心，所以作为你的背景。

第三，创建四个div：

社会
听
视频

将它们浮动到左侧，相应地设置它们的宽度和边距。

最后为你的页脚添加一个div（社交链接和mailto）。

祝你好运。

Answer 2

您需要做的是使用职位。 fixed所做的是确定与窗口（或浏览器）左上角相关的位置，因此无论您如何调整它，它都将始终保持在同一位置。正确的方法是使用absolute和relative。

首先，您需要一个relative容器。您的图片已经居中，因此您可以执行以下操作：

<div id="container">...</div>

#container {width:960px; margin:0 auto; position:relative;}

然后你希望你的视频在一个绝对定位的div中，但是在相对的视频中。所以你的HTML将是：

<div id="container">
 <div id="videoDiv">
   your video here
 </div>
</div>

你对视频的css：

#videoDIv {position:absolute; top:200px; left:200px; }

在网上查看css位置以了解它是如何工作的，它实际上非常简单，但你需要正确的结构。在您的情况下，您的center标记应该是具有位置相对的标记，但请确保将其更改为div，否则某些浏览器会给出验证错误。

话虽如此，您可以做很多事情来改善您的网站。一旦知道如何处理位置，就可以使用不同的图像重新进行布局（因此加载速度更快），并且可以使用实际文本。这对于搜索引擎识别您的网站非常重要，因此请至少尝试使用关键字。

Answer 3

以下是视频div的CSS：

#apDiv1 {
    position:absolute;
    left:747px;
    top:535px;
    width:400px;
    height:223px;
    z-index:1;
    #wrapper {
    margin-left:auto;
    margin-right:auto;
    width:960px;
}

你的意思是两次申报宽度吗？宽度：960px是否会抛弃你的定位？

Answer 4

完全删除<center>标记并将＃apDiv1的css更改为：

#apDiv1 {
   position: absolute;
   left: 597px;
   top: 489px;
   width: 400px;
   height: 223px;
   z-index: 1;
}

无法让我的div保持固定布局

4 个答案: