Question

我需要的是顶部的固定菜单，下面是一个flash文件，然后是一些文本。

这是我到目前为止所做的： http://jsfiddle.net/ovr8spfu/

<style  type="text/css">
#menu {
    background-color:blue;
    height:70px;
    width:100%;
    top:0px;
    left:0px;
    position:fixed;
}
#container {
    background-color:green;
    height:70px;
    width:1310px;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;
}
#logo {
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;
}
.menu_item {
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;
}
.menu_item.test1 {width:80px;}
.menu_item.test2 {width:188px;}
.menu_item.test3 {width:122px;}
.menu_item.test4 {width:136px;}
.menu_item.test5 {width:72px;}
.menu_item.test6 {width:116px;}
.menu_item:hover {background-color:pink;}
a:link {color:#FFFFFF;text-decoration:none;}
a:visited {color:#FFFFFF;text-decoration:none;}
a:active {color:#FFFFFF;text-decoration:none;}
#filler {
    height:62px;
    width:700px;
}
#flash {
    height:500px;
    width:1300px;
    margin-left:auto;
    margin-right:auto;
}
#section {
    width:900px;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
}
</style>
</head>

<body>
<div id="menu">
    <div id="container">
    <div id="logo"></div>
    <a href="#"><div class="menu_item test1">ABC 123</div></a>
    <a href="#"><div class="menu_item test2">TESTING 8637376436</div></a>
    <a href="#"><div class="menu_item test3">Blah Blah Blah</div></a>
    <a href="#"><div class="menu_item test4">HEEEEEEELP</div></a>
    <a href="#"><div class="menu_item test5">XYZ123</div></a>
    <a href="#"><div class="menu_item test6">HOME</div></a>
</div>

我有几个问题，我已经搜索了几个小时，而且我自己无法解决。

青色部分是我的徽标，应始终位于左上方，绿色部分为“填充”，红色的菜单项应保持固定在右上角。

因为我的菜单/容器水平1310px，如果要最小化窗口，我的红色菜单项会在屏幕外消失。我可以做什么，当窗口最小化时，红色菜单项被推到左边，“绿色填充部分”消失了？
我的Flash文件位于菜单下方，水平也是1300px。如果要调整浏览器窗口的大小，如何自动调整大小以使其水平变小？
如何将文本在垂直和水平方向的红色菜单项中居中？
如何将#section文字放在页面中间？

Answer 1

问题1＆amp; 2

如果您将宽度设置为容器和闪存文件的100％，那么当页面重新调整大小时，它会自动将其缩小。

width:100%;

问题3＆amp; 4

这是一个JSfiddle，显示如何根据父divs大小水平和垂直居中，你可以将这个类添加到任何东西，它将根据父divs大小居中 - http://jsfiddle.net/ovr8spfu/2/

.center { text-align:center; position:relative; top:50%; }

Answer 2

我会尝试尽力回答其中的一些问题，但很多情况下你需要学习如何使用百分比，并且可能会更多地了解媒体查询的工作方式。例如http://learnlayout.com/media-queries.html。

此处您的容器需要设置为width:100%;才能开始。这意味着它总是锁定浏览器宽度的大小。您遇到的问题是当屏幕变小时，您的其他项目会被推到彼此之下。
我并不是非常熟悉Flash在浏览器中的工作方式，因为我很遗憾地忘记了很多，但同样，如果你将它设置为容器的100％宽度＆＃ 39; s in，它应该总是填充到那个大小。您可以通过将当前的Flash代码修改为以下内容来完成此操作：

<div id="flash"><embed src="my_flash.swf" height="100%" width="100%" menu="false"></div>

这会强制它达到它所在容器的最大高度和宽度。
这有一些技巧，因为你有一个固定的高度，你可以设置框中的线高与盒子的高度相同，它会垂直居中（line-height: 70px;）.menu-item text-align: center; margin: 0 auto;处理此问题的横向问题。
在这里，你可以使用你已经在你的小提琴中完成的一些技巧：#section而不是margin-left: auto;和margin-right: auto; }。使用margin: 0 auto;只意味着您可以编写更少的代码。

希望这有帮助。

Answer 3

检查此小提琴https://jsfiddle.net/ovr8spfu/3/

#menu {
background-color:blue;
height:70px;
width:100%;
top:0px;
left:0px;
position:fixed;
overflow: hidden;
}
#container {
    background-color:green;
    height:70px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    border-right-width:1px;
    border-right-color:black;
    border-right-style:solid;
}
#logo {
    height:70px;
    width:144px;
    float:left;
    background-color:aqua;
}
.menu_item {
    padding: 25px 5px;
    background-color:red;
    height:70px;
    font-family:Helvetica;
    font-size:14px;
    font-weight:bold;
    text-align:center;
    border-left-width:1px;
    border-left-color:black;
    border-left-style:solid;
    float:right;
}
.menu_item:hover {
    background-color:pink;
}
a:link {
    color:#FFFFFF;
    text-decoration:none;
}
a:visited {
    color:#FFFFFF;
    text-decoration:none;
}
a:active {
    color:#FFFFFF;
    text-decoration:none;
}
#filler {
    height:62px;
    width:100%;
}
#flash {
    height:500px;
    width:100%;
    margin-left:auto;
    margin-right:auto;
    background-color: #000;
}
#section {
    width:100%;
    height:480px;
    margin-left:auto;
    margin-right:auto;
    font-family:Helvetica;
    font-size:18px;
    text-align:center;
}

如果您想设计自适应网站，请尽量避免固定宽度。

我将#container和#flash宽度更改为 100％
我删除了你的test-1，test-2等文章... div会自动调整内容大小，因此无需固定宽度。
为了使菜单链接的文本（以及您的部分文本）水平居中，我使用了 text-align：center 。为了垂直对齐，我刚刚添加了以下填充：
```
.menu_item {
padding: 25px 5px;}
```

我希望这有帮助！

此致

网页顶部的固定菜单，随着窗口大小调整大小

3 个答案: