当浏览器的大小发生变化时，如何阻止页面上的项目移动？
例如，底部的菜单（Home / Music / Videos / Tour / Contact）会随着浏览器大小的减小而移动（就像它被包装一样），以及“Left”和“Right”表格，以及“LISTEN”按钮。无论屏幕大小如何，我希望所有这些都放在背景图片的固定位置。
<style type="text/css">
/* sets the format of the background image */
body {
background-color: gray;
background-image: url('images/backgroundpic.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
margin: 0;
bottom: 0;
height: 100%;
width: 100%;
white-space: nowrap;
}
/* Main menu settings */
#centeredmenu {
clear:both;
float:left;
margin:0;
padding:0;
width:100%;
font-family:Verdana, Geneva, sans-serif;
font-size:90%;
z-index:1000; /* This makes the dropdown menus appear above the page content below */
position:relative;
white-space: nowrap;
}
/* puts the bottom dropup menu on the bottom of the page and centered */
ul {
list-style-type: none;
list-style: none;
position: fixed;
bottom: 0;
margin: 50px;
padding: 0;
clear: left;
float: right;
float: left;
right:50%;
text-align: center;
white-space: nowrap;
}
/* makes it so that the hovered selections stay above the appropriate options */
ul li{
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
right:50%;
left:50%;
white-space: nowrap;
}
/* makes the bottom dropup menu vertical */
li {
float: left;
white-space: nowrap;
}
/* gives the bottom dropup menu shape, style, and form */
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
white-space: nowrap;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: #87cefa;
white-space: nowrap;
}
li.dropdown {
display: inline-block;
white-space: nowrap;
}
/* puts the content inside the hovered selections */
.dropdown-content {
display: none;
text-align: center;
position: absolute;
bottom: 30px;
left: 0;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
white-space: nowrap;
}
/* content inside the hover selections */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: center;
white-space: nowrap;
}
/* makes the selected content in the hover selections colored gray */
.dropdown-content a:hover {background-color: #f1f1f1}
white-space: nowrap;
/* makes the hovered selections possible */
.dropdown:hover .dropdown-content {
display: block;
white-space: nowrap;
}
/* gives the LISTEN button positioning, style, format, ect */
input#gobutton{
text-align: center;
position: absolute;
top: 50%;
left: 34%;
width: 400px;
transform: translate(-50%, -50%)
cursor:pointer;
padding:5px 25px;
background:#87CEFA;
border:1px solid #1E90FF;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0 0 4px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 4px rgba(0,0,0, .75);
box-shadow: 0 0 4px rgba(0,0,0, .75);
color:#f3f3f3;
font-size:1.1em;
white-space: nowrap;
}
/* gives the LISTEN button a hover option and style */
input#gobutton:hover, input#gobutton:focus{
background-color :#000080;
-webkit-box-shadow: 0 0 1px rgba(0,0,0, .75);
-moz-box-shadow: 0 0 1px rgba(0,0,0, .75);
box-shadow: 0 0 1px rgba(0,0,0, .75);
white-space: nowrap;
}
#LeftTable {
position: absolute;
width: 25%;
min-width: 25%;
right: 50px;
left: 50px;
top: 50px;
height: 100px;
border: 1px;
color: black;
font-weight: bold;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
border:1px solid black;
padding:5px;
white-space: nowrap;
}
#RightTable {
text-align: center;
position: absolute;
width: 500px;
min-width: 25%;
right: 25%;
left: 50%;
top: 50%;
bottom: 50%;
height: 100px;
border: 1px;
color: black;
font-weight: bold;
background-color: white;
opacity: 0.5;
filter: alpha(opacity=50);
border:1px solid black;
padding:5px;
margin: 0 auto;
white-space: nowrap;
}
</style>
</head>
<body>
<div style="width: 500px; margin: 0 auto; overflow: hidden;">
<div style="float: left; width: 80%;">Left Column</div>
<div style="float: right; width: 20%;">Right Column</div>
</div>
<table id = "RightTable">
<tr>
<td width = "20%"></td>
<td width = "80%" >
<table>
<tr><td>Right</td></tr>
<tr><td>Right</td></tr>
</table>
</td>
</tr>
</table>
<table class="gobutton" align="center">
<tr>
<td>
<div class="b_left"></div>
<div class="b_middle">
<a href="http://www.google.com.html">
<input id="gobutton" type="submit" value="LISTEN" />
</a>
</div>
<div class="b_right"></div>
</div>
</td>
</tr>
</table>
</div>
<div class="body">
<table id = "LeftTable">
<tr>
<td width = "20%"></td>
<td width = "80%" id='test'>
<table>
<tr><td>Left</td></tr>
<tr><td>Left</td></tr>
</table>
</td>
</tr>
</table>
</div>
<div id="centeredmenu" nowrap>
<ul>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Home</a>
<div class="dropdown-content">
<a href="#">Home Page</a>
</div>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Music</a>
<div class="dropdown-content">
<a href="#">Song 1</a>
<a href="#">Song 2</a>
<a href="#">Song 3</a>
</div>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Videos</a>
<div class="dropdown-content">
<a href="#">Video 1</a>
<a href="#">Video 2</a>
<a href="#">Video 3</a>
</div>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Tour</a>
<div class="dropdown-content">
<a href="#">North America Dates</a>
<a href="#">Europe Dates</a>
<a href="#">Misc Dates</a>
</div>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Contact</a>
<div class="dropdown-content">
<a href="#">Comments</a>
<a href="#">Technical Support</a>
<a href="#">Booking</a>
</div>
<li class="dropdown" align="center" nowrap>
<a href="#" class="dropbtn" nowrap>Contact</a>
<div class="dropdown-content">
<a href="#">Comments</a>
<a href="#">Technical Support</a>
<a href="#">Booking</a>
</div>
</li>
</ul>
</div>
</body>
</html>
答案 0 :(得分：0)
看起来您正在寻找一种具有3列布局的方法，以及具有固定宽度的左右列的页脚。这是对的吗？
如果是这样，也许您可以使用css flexbox来创建这种布局。看一下这个例子。
希望这有帮助！
#body {
background-color:#af5;
padding:10px;
min-width:700px;
}
.container {
flex-direction:row;
flex-wrap:nowrap;
justify-content:center;
display:flex;
}
.column {
border:1px solid #333;
background-color:#dfdfdf;
min-height:300px;
padding:20px;
}
.left {
flex-basis:150px;
}
.center {
flex-basis:auto;
}
.right {
flex-basis:150px;
}
.bottom {
width:100%;
border:1px solid #333;
box-sizing:border-box;
background-color:#def;
}
.bottom ul li {
display:inline-block;
margin:0 20px;
}<div id="body">
<div class="container">
<div class="left column">
Left column has a fixed width.
</div>
<div class="center column">
<h2>Center has no fixed width.</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="right column">
Right column has a fixed width too.
</div>
</div>
<div class="bottom">
<ul>
<li>Menu elem 1</li>
<li>Menu elem 2</li>
<li>Menu elem 3</li>
</ul>
</div>
</div>