我的网站地址is here页面上的两个黑色div缩小了宽度，并在页面调整大小时上下移动。目前我已经创建了网站，看看我希望它在1920 x 1080分辨率下如何。
我的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS Computing Services - Home </title>
<!--[if IE]>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<link href="IEStyleSheet.css" rel="stylesheet" />
<![endif]-->
<META NAME=”Description” CONTENT=”JS Computing Services offers reliable, affordable and professional computer repair, laptop repair, bespoke web design, web hosting and custom hosted email packages in Sheringham, Norfolk, UK”>
<meta name="keyword" content="Sheringham, Computer repair, Laptop repair, Norfolk, Web hosting, bespoke web design, sales, new laptops, new desktop, tablets, apple, mac, apple mac, Affordable,Computer, Laptop, Refurbished, Microsoft partners, UKDWA Member, UKDWA, UK Web Design Assosiation, UK Web Design Assosiation member, reliable, Custom hosted email, email, cloud storage, android, OS X, Windows, Microsoft,Microsoft Windows, freindly">
<!--[if !IE]> -->
<link href="StyleSheet.css" rel="stylesheet" type="text/css" media="only screen" />
<link href="MobileStyleSheet.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px) , only screen and (-webkit-min-device-pixel-ratio: 2) , screen and (-webkit-device-pixel-ratio:1.5)" />
<!-- <![endif]-->
<!--[if IEMobile]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="script.js"></script>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,700' rel='stylesheet' type='text/css'>
<link rel="apple-touch-icon" sizes="57x57" href="img/faveicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/faveicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/faveicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/faveicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/faveicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/faveicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/faveicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/faveicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/faveicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="img/faveicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="img/faveicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="img/faveicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="img/faveicon/favicon-16x16.png">
<link rel="manifest" href="img/faveicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="img/faveicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<style>
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block;}body { line-height: 1;}
ol, ul { list-style: none;}blockquote, q { quotes: none;}blockquote:before, blockquote:after,q:before, q:after { content: ''; content: none;}table { border-collapse: collapse; border-spacing: 0;}
html, body {margin:0;padding:0;height:100%;
background-color: #b3b3b3;
font-family: 'Raleway', sans-serif;
min-width: 860px; }
.Container {
width: 100%;
margin: auto;
position: relative;
}
#top_bar {
background-color: #b3b3b3;
width: 100%;
height: 49%;
top: 0;
}
#logo {
margin-top: 1%;
width: 20%;
margin-left: auto;
margin-right: auto;
display: block;
margin-bottom: 1%;
}
#footer {
background-color: #0480be;
position:fixed;
width: 100%;
bottom: 0;
height: 3%;
padding-top: 1%;
padding-bottom: 1%;
padding-left: 1%;
}
ul {
list-style-position: inside;
}
a {
color: inherit; /* blue colors for links too */
text-decoration: inherit; /* no underline */
}
#facebook {
float: right;
margin-top: -1%;
margin-left: -2%;
}
#google {
float: right;
margin-top: -1%;
}
#ukwda {
float: right;
margin-top: -2%;
margin-left: 1%;
margin-right: 2%;
}
#welcome {
background-color: #0480be;
text-align: center;
margin: 1%;
}
#intro {
background-color: #46a546;
padding: 1%;
margin: 1%;
}
#services {
padding: 1%;
margin: 1%;
background-color: #ff534b;
width: 30%;
}
#diagnostics {
background-color: black;
margin: 1%;
padding: 2%;
width: 18%;
border-radius: 40px;
height: 30%;
}
#speedups {
background-color: black;
margin-top: 1%;
margin-left: 25%;
margin-top: -9%;
padding: 2%;
width: 18%;
min-width: 18%;
border-radius: 40px;
overflow: hidden;
}
</style>
<!-- Place this tag in your head or just before your close body tag. -->
<script src="https://apis.google.com/js/platform.js" async defer>
{lang: 'en-GB'}
</script>
</head>
<body>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="Container">
<div id="top_bar">
<div id='cssmenu' class='align-center'>
<ul>
<li class='active'><a href='index.html'>Home</a></li>
<li><a href='web_design_and_web_hosting.html'>Web design & Web hosting</a></li>
<li><a href='laptop_and_desktop_computer_repair.html'>Laptop & Desktop computer repair</a></li>
<li><a href='emails.html'>Emails</a></li>
<li><a href='https://webmail.jscomputingservices.co.uk'>Emails Login</a></li>
<li><a href='contact_us.html'>Contact us</a></li>
</ul>
</div>
<a href="http://jscomputingservices.co.uk"><img src="img/new%20logo.png" id="logo"></a>
</div>
<div id="welcome">
<br />
<font size="+1>"><font color="white"><h1>Welcome to JS Computing Services</b></h1></font></font>
<br />
</div>
<div id="intro">
<h1>We are located in Sheringham, Norfolk but we happily travel to the surrounding villages when we're needed. We offer friendly advice and repairs with over 20 years experience. We work with all Major operating systems including; Microsoft Windows, Apple OS X and IOS, Android and Linux, we repair Computer and Apple Macs but we also repair tablets and smartphones and are here to help with every aspect of your IT needs.
We offer both new and refurbished equipment to suit all budgets such as; new laptops, refurbished laptops, new tablets, phones and custom built desktop PCs.
For more information or any quires/questions please feel free to Email: assistance@jscomputingservices.co.uk or phone: 07789895603.</h1>
</div>
<div id="diagnostics">
<h1 align="center"><font size="+1"> Diagnostics</font></h1><br />
<h2> At JS Computing Services <br />we offer free no obligation diagnostics on any problems you face with your tech.</h2>
</div>
<div id="speedups">
<h1 align="center"><font size="+1"> Speed ups</font></h1><br />
<h2>Computer or laptop running slow? Bring it to us so we can get your tech preforming as it should.</h2>
</div>
</aside>
</div>
<br /><br /><br /><br /><br />
<footer id="footer">
<font color="white"> <h3>Copyright © JS Computing Services LTD Website designed & hosted by <a href="www.jscomputingservices.co.uk">JS Computing Services</a></h3>
<div id="ukwda">
<a href="http://www.ukwda.org/member?mid=113942&key=e50262abb6348a1c572fc864f5a85c08" target="_blank"><img src="http://www.ukwda.org/uploads/images/ukwda_rgb_web.png" width="80"></a>
</div>
<div id="facebook">
<div class="fb-like" data-href="https://facebook.com/jscs.co.uk" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div></div>
<div id="google">
<div class="g-plusone" data-size="medium"></div>
</div>
</footer>
</div>
</body>
答案 0 :(得分：0)
您使用负边距而不是浮点数。将您的CSS更改为：
#diagnostics{
background-color: black;
margin: 1%;
padding: 2%;
width: 18%;
border-radius: 40px;
float: left;
height: 30%;
}
现在取出负边距并添加float: left：
#speedups{
background-color: black;
margin-top: 1%;
padding: 2%;
width: 18%;
min-width: 18%;
border-radius: 40px;
overflow: hidden;
float: left;
}
答案 1 :(得分：0)
简短的回答是将#diagnostics和#speedups向左浮动（float: left;）并移除margin-left: 25%;和margin-top: 9%;。