这是我人生中创建的第一个网站，非常感谢您的帮助!我还在学习html和css。我的第一个网站快完成了，除了我已经为我的原始分辨率 - 1280x800 构建了它。当我改变分辨率时，元素会分开。为了弥补这一点，我只需要更改 body 属性中右边距的值。例如，当前为 7em。如果我想在 1920x1200 分辨率下看起来居中，值应该是 27em。我尝试过使用网站包装器和@media 查询技术，但这似乎不起作用。解决方案显然很简单，但我无法自己弄清楚。
请帮帮我!
我的 HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Autoprevoznik Damjanić</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="description" content="Autoprevoznik Damjanić / Prevoz robe / Špediterske usluge" />
<meta name="keywords" content="Damjanić, autoprevoznik, špediter, prevoz robe, špediterske usluge" />
<link rel="stylesheet" type="text/css" href="naslovna.css" />
<link rel="shortcut icon" href="Truck.ico" />
</head>
<body>
<h1><a href="naslovna.html">:::Autoprevoznik Damjanić</a></h1>
<div id="border_left"></div>
<ul>
<li><a href="kontakt.html">Kontakt Informacije</a></li>
<li><a href="galerija.html">Galerija slika</a></li>
<li id="empty"><a href="onama.html">O nama</a></li>
</ul>
<div id="border_right"></div>
<div id="content">
<p>Ispum schmipsum.</p>
</div>
<div class="background">
<div class="border">
<div id="box1">
<h2>Ukratko o nama</h2>
<h3>Usluge prevoza</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="galerija.html" style="text-decoration:none" title="Galerija slika" class="read_more">galerija</a></div>
</div>
</div>
</div>
<div class="background">
<div class="border">
<div id="box2">
<h2>Aktuelnosti</h2>
<h3>Poslednje vesti</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
<div class="button" ><a href="onama.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>
<div class="background">
<div class="border">
<div id="box3">
<h2>Kontakt informacije</h2>
<h3>Identifikacija preduzeća</h3>
<p>Možete nas kontaktirati na brojeve telefona :</p>
<p>+381 (0) 6</p>
<p>+381 (0) 34</p>
<p>Email:</p>
<div class="button" ><a href="kontakt.html" style="text-decoration:none" title="Detaljnije" class="read_more">detaljnije</a></div>
</div>
</div>
</div>
</body>
</html>
还有我的 CSS:
body {
background:url(background.jpg);
background-repeat: no-repeat;
background-position: top center;
background-color:#b0d3f6;
margin: 3em 7em 0em;
}
p {
font-size: 11px;
margin: 0px 30px 0px 0px;
color: rgb(111, 130, 150);
line-height: 18px;
text-align: left;
}
h1 a {
color: rgb(27, 63, 150);
position: relative;
top: 30px;
text-decoration: none;
}
h2 {
font-size: 16px;
color: rgb(27, 63, 98);
margin-bottom: -5px;
}
h3 {
font-size: 12px;
color: rgb(84, 130, 175);
}
#box1, #box2, #box3 {
display: inline-block;
width: 306px;
background: url(box_top.png) top left no-repeat;
padding: 0px 18px;
position: relative;
top: -35px;
}
.border {
display: inline-block;
background: url(box_bottom.png) bottom left no-repeat;
position: relative;
top: 17px;
vertical-align: top;
}
.background {
display: inline-block;
background: url(box_in.png) repeat-y;
}
.button {
position: relative;
left: -10px;
width: 77px;
height: 19px;
line-height: 16px;
background: url("button.png") no-repeat;
font-size: 11px;
color: rgb(255, 255, 255);
text-align: center;
margin: 20px 10px 0px;
}
a { color:white;}
ul {
float:right;
position:relative;
top: -35px;
left: -60px;
list-style: none;
padding:0;
margin:0;
height: 48px;
line-height: 70px;
background: url("menu_back.png") no-repeat;
}
ul a {
color: rgb(113, 136, 157);
text-decoration: none;
font-size: 12px;
line-height: 45px;
display:block;
}
ul li {
background: url("menu_line.png") no-repeat;
position: relative;
float: right;
margin: 7px 0px 0px;
height: 40px;
}
li {
float: right;
border-bottom-width: 0;
padding: 0px 20px;
}
#content {
position: relative;
top: -35px;
clear: both;
width: 1005px;
height: 247px;
background: url("slider_back.png") no-repeat;
}
#content p {
margin-left: 2em;
}
#border_left {
background: url("menu_back_left.png") no-repeat;
position: relative;
right: 440px;
top: -35px;
height: 48px;
width: 11px;
float: right;
}
#border_right {
background: url("menu_back_right.png")no-repeat;
position: relative;
right: -320px;
top: -35px;
height: 48px;
width: 11px;
float: right;
}
#empty {
background: none;
}
如您所见，唯一有问题的行是 margin: 3em 7em 0em;如果我可以使右边距值 (7em) 流畅，问题就会解决!
最佳答案
您想要的是居中您的网页？如果你想居中，我建议使用:
margin: 0 auto; /*left and right margin are "automatic"*/
您可以使用它在任何分辨率下使您的 body 居中:
body {
margin: 0 auto;
width: 80%;
}
如果您将 100% 设置为内容全宽，则没有任何内容可以居中。如果你想让另一个东西居中，你想要居中的盒子的宽度应该小于他的 parent 。
无论如何，使用 body 元素中的值来居中并不好。
关于html - 如何使我的边距适合多种分辨率？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15042307/