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，調整瀏覽器大小時頁面上的停止元素

回答

相關問題