CSS HTML浏览器大小更改放置

-1

当浏览器的大小发生变化时，如何停止页面上的项目移动？CSS HTML浏览器大小更改放置

例如，随着浏览器尺寸的减小以及“左”和“右”的移动，底部的菜单（Home/Music/Videos/Tour/Contact）表格和“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>

来源

2016-09-21 Krispy

因为你拥有了一切设置为100％，因此它与浏览器调整。为了避免这种情况，请将容器放在大约990像素（如果想要放大的情况下为1170像素）和边距：0自动将容器放在页面中央。 – Rob

请仔细阅读[如何创建一个最小，完整和可验证的示例]（http://stackoverflow.com/help/mcve），并将您的示例代码缩减到只有相关部分 – henry

是否就像添加＃容器{border-width：990px; margin：0 auto;}？因为我将它添加到我的CSS代码中，但它仍未修复它。我还需要在HTML中做些什么吗？ – Krispy

它看起来像你正在寻找一种方式来有一个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>

来源

2016-09-21 18:11:23

是的！谢谢！ – Krispy

CSS HTML浏览器大小更改放置

回答

相关问题