Question

我是这个网站的新手，也是Web客户端开发的新手。我遇到了一个奇怪的问题，当我放大时，为什么我的布局会发生变化？这是一个截图。

放大之前：https：https://i.stack.imgur.com/vs7uZ.png

放大后：https://i.stack.imgur.com/vs7uZ.png

Here is my HTML code

＆＃13;

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Revisions Bookstore &amp; Cafe</title>
      <!--
         Revisions Bookstore and Cafe main web page
         Filename: index.html
      
         Author:   
         Date:     
         HTML5 and CSS3 Illustrated Unit D, Visual Workshop
      -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="js/modernizr.custom.62074.js"></script>
      <link rel="stylesheet" href="css/style4.css">
   </head>
   <body

＆＃13;

 Here is my CSS code

＆＃13;

/* reset styles */
article, body, div, footer, header, h1, h2, p {
	border: 0;
	padding: 0;
	margin: 0;
}
/* body and page container */
body {
   background-color: floralwhite;
}
.container {
    max-width: 640px;
    margin: 0 auto;
    background-color: burlywood;
    border-bottom: 2.4px solid navy;
	border-top: 2.4px solid navy; 
	border-left: 2.4px solid navy;
	border-right: 2.4px solid navy;
	
}

/* headings */
header {
   text-align: center;
   color: navy;
   background-color: lightblue;
   padding: 0.5em;
}
	
/* Upcoming events */
h2 {
	 padding: 0.4em;
	 margin-left: 0.2em;
	 
	
	
}
/* main content */
article {
   width: 70%;
   float: right;
   background-color: white;  
   padding-bottom: 1.0em;  
}
article p {	
	margin-left: 1.8em;
	margin-top: 0.6em;		
}
/* sidebar */
aside {
  width: 30%;
  padding-bottom:4.3em;
  background-color: burlywood;
   
}
aside p {
	margin-left: 1.3em;
	margin-top: 1.0em; 			
}
/* footer section */
footer {
   color: navy;
   background-color: lightblue;
   text-align: right; 
   padding-top:0.4em; 
   padding-bottom: 0.4em;
}
footer p {
	margin-right: 0.5em;
	clear:right;
}

＆＃13;

当我放大时，为什么我的布局会搞乱？

0 个答案: