包装div的宽度和内容的宽度应根据内容权限的内容增加

时间:2012-06-22 07:25:08

标签: html css

大家好我有像这样的HTML代码

<html>
<head>
<style type="text/css">
body {      
font-family:arial,helvetica,sans-serif;     
font-size:12px; background-color: blue;
}

**#wrapper {        
width:900px;        
margin:0px auto;        
border:1px solid #bbb;      
padding:10px; background-color: pink;   
}**

#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; 
} 
**#images
{
position:relative; 
top:0px;
}** 
#content-left 
{       
width:380px;    
}       
**#content-right 
{ 
position:relative; 
top:0px;        
margin-left:10px;       
width:534px;    
}** 
#footer 
{       
float:left;     
margin-top:10px;        
margin-bottom:10px;     
padding:10px;       
border:1px solid #bbb;      
width:878px;    
}   
#bottom 
{       
clear:both;     
text-align:right;   
}



</style>
</head>

<body>
<div id="wrapper">  
<div id="header">Header</div>   
<div id="content">      
<div id="content-left"></div>       
**<div id="content-right"><div id="images"><img src="pics02.jpg"     
width="300px;height="900px" /></div>**
</div>  
</div>  
<div id="footer"></div> 
<div id="bottom"></div>
</div>
</body>
</html>

我有一个问题,如果我在内容中插入一些内容,如果内容超过内容的宽度,则首先内容权限应该扩展,然后包装器应该展开,但这不会发生在那里,并从包装出来。任何人都可以指导我如何进行。

1 个答案:

答案 0 :(得分:1)

您已修复内容权限的宽度。所以它不会!它可能会调整高度,但它不会调整宽度..你可以使用min-width属性来设置内容的最小宽度... http://www.w3schools.com/cssref/pr_dim_min-width.asp