HTML，调整浏览器大小时页面上的停止元素

您好，我正试图阻止浏览器调整大小时移动的元素，例如，当我使Chrome窗口变小时，一切开始向左移动到不同的位置，包括与菜单栏重叠的文本，即使在调整窗口大小时，我是否可以将它保留在相同的位置？HTML，调整浏览器大小时页面上的停止元素

这是我的HTML代码的开始：

<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8" /> 
    <link rel="stylesheet" type="text/css" href="css/alternativeCSS2.css" 
title="bigsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS2.css" title="mediumsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS3.css" title="smallsheet"/> 
    <link rel="alternate stylesheet" type="text/css" 
href="css/alternativeCSS4.css" title="specialsheet"/> 
    <script type="text/javascript" src="script/CTEC1800-Stylesheets(4).js" > 
</script> 
    <title>Historical Pioneers</title> 
</head> 
<body onload="chooseStyleBySize()"> 
    <div id="layout"> 
    <div id="swapping"> 
     <p> 
      <select onchange="setActiveStyle(this.value)"> 
       <option value="bigsheet">For big pages</option> 
       <option value="mediumsheet">For medium-sized pages</option> 
       <option value="smallsheet">For small pages</option> 
       <option value="specialsheet">For special pages</option> 
      </select> 
     </p> 
    </div> 
    <div id="header"> 
     <h1 id="logo"><img src="img/logo.png" width="200px" height="70px" 
alt="logo" /></h1> 
    </div> 
    </div> 
    <div id="nav" class="box"> 
    <ul class="nav"> 
     <li id="active"><a href="home.html">Home</a></li> 
     <li><a href="Hitlers Biography.html">Adolf Hitler's Biography</a> 
</li> 
     <li><a href="Winston Churchill.html">Winston Churchill's 
Biography</a></li> 
     <li><a href="About Us.html">About Us</a></li> 
     <li><a href="Contact Us.html">Contact</a></li> 
    </ul> 
    </div> 
    <div id="container" class="box"> 
    <div id="intro"> 
     <div id="intro-in"> 
      <h1>60 million men fought in 'The War to End All Wars', It ended 
nothing..</h1> 
      <p class="intro"> 
       "Putting history in it's place". For many years we have been 
collecting, researching and interpreting historical information from the 
World War 2, How the key figures including Adolf Hitler and Franklin D. 
Roosevelt influenced this great war between 1939 to 1945. 
       Some information that was not yet looked into properly that 
was very well important and how it all began in the first place. 
      </p> 
     </div> 
     <div id="hr"> 
      <hr />

这是我的CSS代码：

/*--------------------- Main Body --------------------- */ 

* { 
margin: 0; 
padding: 0; 
} 
body, div, span, p, a, img, ul, ol, li, table, th, tr, td, form, fieldset, 
legend, dl, dt, dd, blockquote, applet, object { 
border: 0; 
} 
p { 
margin: 15px 0; 
} 
body { 
padding: 0; 
background-color: #ededed; 
background: #fff url("../img/bg1.jpg") repeat-y; 
font: 0.8em/1.5 "arial", sans-serif; 
color: #354146; 
text-align: center; 
width: 100%; 
} 

#layout { 
} 

#header{ 
text-align: left; 
margin-left: 30px; 
} 

#swapping{ 
text-align: left; 
margin-left: 45px; 
} 

#container{ 
margin-left: 40%; 
clear: both; 
width: 100%; 

} 

/*--------------------- Horizontal Navigation Menu --------------------- */ 

#nav { 
margin: 0; 
height: 100%; 
margin-top: 20px; 
} 
#nav ul { 
list-style-type: none; 
width: 14%; 
min-width:265px; 
height: 100%; 

clear: both;

text overflowing to the menu bar

来源

2017-04-09 DrExpresso

是的，这是可能的。你可以给“body”或你的页面封装一个固定的宽度，但你应该考虑让你的网站移动友好。 – Alex

您需要考虑** Responsive **网页设计，以控制不同视口中的元素。 – fadifannoun

你可以做到这一点通过固定您的HTML身体的宽度，但这是没有意义的，因为你想建立RESPONSIVE网站，而不是固定的，只能在某些决议工作！

在你的CSS只需键入：

body{ 
    width: [pixel_size]px; 
}

来源

2017-04-09 21:00:42

HTML，调整浏览器大小时页面上的停止元素

回答

相关问题