Question

**html**
<html>
<head>
<link rel="stylesheet" href="style.css" ... />
</head>

<body>

<div id="wrapper">  
<div id="header">
<div id="comcast"><img src=Desert.jpg width="18px" height="40px"></img></div>
<div id="menu"><img src=Hydrangeas.jpg width="48px" height="40px"></img></div>
</div>  
<div id="content">      
<div id="content-left"><img src=Desert.jpg width="180px"      height="1000px"></img></div>      
<div id="content-main"><img src=Hydrangeas.jpg width="700px"  height="1000px"></img></div>      
</div>  
<div id="footer"></div> 
<div id="bottom"></div>
</div>

</body>
</html>





**css**
body 
{       
 font-family:arial,helvetica,sans-serif;        
 font-size:12px;    
}


#wrapper 
{       

 margin:0px auto;       
 border:1px solid #bbb;     
 padding:10px;  

}

#header 
{       
 border:1px solid #bbb;     
 height:80px;       
 padding:10px;  
}   

#content 
{       
 margin-top:10px;       
 padding-bottom:10px;   
}   
#content div 
{       
 padding:10px;      
 border:1px solid #bbb;     
 float:left;    
}   
#content-left 
{       
width:180px;    
}   
#content-main 
{       
 margin-left:10px;      
 width:700px;   
}   

#footer 
{       
float:left;     
margin-top:10px;        
margin-bottom:10px;     
padding:10px;       
border:1px solid #bbb;      
width:878px;    
}   
#bottom 
{       
clear:both;     
text-align:right;   
}

*{
margin:0px;
 }

#menu
{
float:right;
}

问题是如果我 zoomin 或缩小内容还剩下内容主要内容正在发生变化。我的要求是我们是否放大或缩小内容左侧和内容基础它应该如此缩小，它不应该混乱。我怎么能实现这一点。

Answer 1

在专门处理该问题之前，您需要修复一些HTML suntax /验证问题

<img src=Hydrangeas.jpg width="48px" height="40px"></img>

应该是

<img src="Hydrangeas.jpg" width="48" height="40" />

在“”
不会在宽度和高度上重新使用像素。
删除并终止打开的代码为/＆gt;

放大和缩小html页面中的问题

1 个答案: