HTML，在调整浏览器大小时阻止页面上的元素移动答案

【问题标题】：HTML, stop elements on page from moving when browser is resizedHTML，在调整浏览器大小时阻止页面上的元素移动
【发布时间】：2017-09-04 19:22:41
【问题描述】：

您好，我正在尝试在调整浏览器大小时阻止元素移动，例如，当我缩小 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

【问题讨论】：

是的，有可能。您可以为 body 或您的页面包装器提供固定宽度，但您应该考虑让您的网站适合移动设备。
您需要考虑响应式网页设计，以控制不同视口中的元素。

标签： html css element

【解决方案1】：

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

只需在您的 CSS 中输入：

body{
    width: [pixel_size]px;
}

【讨论】：