我的网址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>
最佳答案
您使用的是负边距而不是 float 。将您的 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;
}
关于html - div移动和调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29546406/