但是当我从浏览器调整窗口大小时，所有div都会自动移动。
我的网站：http://teteste.herobo.com/ - 这种语言是葡萄牙语，但你可以理解发生了什么。
正如您所看到的，当您调整窗口大小时，div会自动更改，有没有办法防止div在调整页面大小时移动？
我的Html代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link href='http://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<title>AngoBooks</title>
</head>
<script type="text/javascript">
$(document).ready(function(){
$('img.g1').hover(function() {
$(this).stop().animate({opacity:1}, 'fast');
}, function() {
$(this).stop().animate({opacity:.5}, 'slow');
});
});
</script>
<script type="text/javascript">
var i = 0;
var path = new Array();
path[0] = "imagens/1.png";
path[1] = "imagens/2.png";
path[2] = "imagens/3.png";
var k = path.length-1;
var caption = new Array();
caption[0] = "Primeira descrição";
caption[1] = "Segunda descrição";
caption[2] = "Terceira descrição";
function swapImage(){
var el = document.getElementById("mydiv");
el.innerHTML=caption[i];
var img= document.getElementById("slide");
img.src= path[i];
if(i < k ) { i++;}
else { i = 0; }
setTimeout("swapImage()",5000);
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
swapImage();
});
</script>
<body>
<div class="cbc">
<div id="redes">
<div style="width:90%; solid #000;">
<div style="float:left; width:33.3%;">
<div align="center"><img src="imagens/facebook.png" height="40" width="40" />
<img src="imagens/twitter.png" height="40" width="40" />
<img src="imagens/g+.png" height="40" width="40" />
</div>
</div>
<div style="float:left; width:33.3%;">
<form method="POST" action="http://YOUR_DOMAIN_HERE:81/login/login.php">
<div align="right"><font color="#FFFFFF" face="'Armata', sans-serif">Utilizador:</font>
<input type="text" name="Utilizador" size="15" />
</div>
</div>
<div style="float:left; width:33.4%;"><font color="#FFFFFF" face="'Armata', sans-serif">Password:</font> <input type="text" name="username" size="15" />
<button type="submit" value="Login" class="botao">Entrar</button>
<button type="submit" value="Cadastrar" class="botao">Registar</button></div>
<div style="clear:both;"></div>
</div></div>
</div>
</div>
<div id="principal">
<div class="centered-block">
<a href="/" class="logo-lnk">
<img src="imagens/logo.png"/>
</a>
<nav id="menu">
<ul>
<li><a href="#"><font color="white">Ínicio</font></a></li>
<li><a href="#"><font color="white">Categorias</font></a></li>
<li><a href="#"><font color="white">Outros produtos</font></a></li>
<li><a href="#"><font color="white">Carrinho</font></a></li>
<div id="divisoria"></div>
</ul>
</nav>
</div>
<div class="subtitulo">
<p><font color="white">Vendemos Online, desde 2011, os melhores livros</p>
<p> do mercado em Angola, encomende já o seu.</font></p>
</div>
<div id="slideshow">
<body>
<img name="slide" id="slide" alt ="my images" height="300" width="900" src="imagens/1.png"/>
<div id="mydiv"></div>
<script>
document.getElementById("mydiv").style.color="white";
</script>
</div>
</div>
</div>
</div>
<div style="width:100%; padding: 160px 0 10px 0;">
<div style="clear:both;"></div>
<div style="width:100%; padding: 3px 0 10px 0;">
<div style="float:left; width:33.3%; height:28px; background-image:url(imagens/titulo.png)"></div>
<div style="float:left; width:33.3%; height:28px;"><p align="center"><font size="6" color="#ff7c00" face="'Roboto', sans-serif"> Principais categorias </p></div>
<div style="float:left; width:33.4%; height:28px; background-image:url(imagens/titulo.png)"></div>
<div style="clear:both;"></div>
</div>
<div class="fade1">
<img src="imagens/g1.png" alt="foto" class="g1" />
<img src="imagens/g2.png" alt="foto" class="g1" />
</div>
<div class="fade2">
<img src="imagens/g3.png" alt="foto" class="g1"/>
<img src="imagens/g4.png" alt="foto" class="g1"/>
<img src="imagens/g5.png" alt="foto" class="g1"/>
</div>
<div style="clear:both;"></div>
<div class="creditos">
<div class="empresa">
<div style="width:90%; solid #000; position:relative;">
<div style="float:left; width:25%;"><h1 align="left"
><font color="#A66100">Atendimento</font></h1>
<div align="left">
<ul id="atendimento">
<li>Contacte-nos</li>
<li>Devoluções</li>
<li>Mapa do site</li>
</ul>
</div>
<ul id="atendimento">
</ul></div>
<div style="float:left; width:25%;"><h1 align="left">Conta</h1>
<div align="left">
<ul id="Conta">
<li>Conta</li>
<li>Histórico de Pedido</li>
<li>Newsletter</li>
</ul>
</div>
<ul id="Conta">
</ul></div>
<div style="float:left; width:25%;"><h1 align="left">Extras</h1>
<div align="center">
<ul id="Extras">
<li>
<div align="left">Fabricantes
</div>
</li>
<li>
<div align="left">Vale Presente
</div>
</li>
<li>
<div align="left">Promoções</div>
</li>
</ul>
</div>
<ul id="Extras">
</ul></div>
<div style="float:left; width:25%;"><div class="informacao">
<h1 align="left">Informação</h1>
<div align="left">
<ul id="info">
<li>Sobre nós</li>
<li>Sobre as Encomendas</li>
<li>Termos e Condições</li>
</ul>
</div>
<ul id="info">
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width:100%; padding: 0px 0 10px 0;">
<div style="float:left; width:33.3%; height:18px;><div id="redessociais">
</div>
<div style="float:left; width:33.3%; height:18px;"><div class="developer">Copyright © 2013 AngoBooks. Todos os direitos reservados. <br> Site desenvolvido por: Rúben Diogo.</p></div></div>
<div style="clear:both;"></div>
<div style="float:left; width:33.4%; height:18px;"></div>
</div>
</div>
</body>
</html>
我的Css代码：
* {
padding:0;
margin:0 auto;
}
div#principal {
background-image:url(../estrutura/bg.png);
height:410px;
background-repeat:repeat-x;
width:100%;
}
#menu ul {
padding:0px;
margin:23px;
text-aligne:center;
list-style:none;
text-align:enter !important;
left:162px;
float:right;
font-family:'Armata', sans-serif;
}
#menu ul li {
display:inline;
}
#menu ul li a {
padding:2px 10px;
display:inline-block;
color:black;
text-decoration:none;
z- ndex:12;
horizontal-align:middle;
}
#menu ul li a:hover {
color:white;
border-bottom:3px solid white;
}
.logo-lnk {
width:250px;
display:block;
float:left;
}
.logo-lnk img {
width:100%;
border:0;
}
.centered-block {
width:987px;
margin:0 auto;
padding:23px 0 20px 0;
}
div#divisoria {
height:1px;
weight:100%;
background:white;
}
.subtitulo {
padding:56px 0 20px 0;
text-align:center;
font-size:45px;
font-family:'Roboto', sans-serif;
text-shadow:0.0em 0.0em 0.01em #FFB873;
}
.g1 {
background:none;
}
.g1:hover {
background:#0000ff;
}
.fade1 {
padding:10px 0 20px 0;
text-align:center;
}
.fade2 {
text-align:center;
}
div#slideshow {
margin:0 auto;
text-align:center;
}
div#mydiv {
background-color:#ff7c00;
width:900px;
font-family:'Armata', sans-serif;
}
.creditos {
background-image:url(../estrutura/bg2.png);
height:75px;
weight:100%;
padding:90px 0 20px 0;
text-align:center;
}
.empresa {
list-style-type:none;
color:#A66400;
font-family:'Roboto', sans-serif;
font-size:12px }
ul#atendimento {
list-style-type:none;
font-size:13px;
}
ul#Extras {
list-style-type:none;
font-size:13px;
}
ul#Conta {
list-style-type:none;
font-size:13px;
}
ul#info {
list-style-type:none;
font-size:13px;
}
div#titulo {
background-image:url(../imagens/titulo.png);
width:100%;
height:28px;
}
.facebook {
text-align:left;
width:60px;
height:60px;
}
.youtube {
text-align:left;
width:60px;
height:60px;
}
.twitter {
text-align:left;
width:60px;
height:60px;
}
.developer {
font-size:12px;
color:#bebebe;
text-align:center;
}
div#redes {
position:fixed;
top:0;
left:0;
width:100%;
height:40px;
background:url(../imagens/bgg.jpg);
z-index:30;
opacity:0.6;
filter:alpha(opacity=60);
}
.cbc {
height:40px;
}
.botao {
background-color:#ff7c00;
color:white;
font-family:'Armata', sans-serif;
position:absolute;
}
答案 0 :(得分：9)
将其添加到样式表中：
body { min-width: 750px; }
（根据您的需要调整宽度）。 当浏览器窗口小于750px时，将出现水平滚动条。
答案 1 :(得分：0)
如果您希望页眉和页脚停止变宽，请添加：
.class{max-width:960px}/*or whatever you want the px to be*/
如果您希望他们不要变小，请添加:(就像LinkinTED所拥有的那样）
.class{min-width:960px}/*or whatever you want the px to be*/
如果您希望它始终具有相同的宽度：
.class{width:960px}
这完全取决于你想要什么。 .class可能是你的身体，或者包裹你所有的html身体元素。
答案 2 :(得分：-2)
我在你的网站上试过它似乎有效！
body {
width: 100%;
}