Question

你好我试图在浏览器调整大小时阻止元素移动，例如当我使chrome窗口变小时，一切都开始向左移动到不同的位置，包括与菜单栏重叠的文本，我可以保持即使我调整窗口大小，它也处于同一位置？

这是我的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

Answer 1

你可以通过修复html正文的宽度来做到这一点，但这并没有意义，因为你想建立 RESPONSIVE 网站，而不是那些仅适用于某些分辨率的网站！

只需在CSS中输入：

body{
    width: [pixel_size]px;
}

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

1 个答案: