html - wrapper div 的宽度和 content right 的宽度应根据 content right 中的内容增加

标签 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>

我有一个问题,如果我在内容右侧插入一些内容,如果内容大于内容右侧的宽度,首先内容右侧应该展开,然后包装器应该展开,但这不会发生那里是从 wrapper 里出来的。谁能指导我如何进行。

最佳答案

您已经固定了右侧内容的宽度。所以它不会!它可能会调整高度但不会调整宽度..您可以使用 min-width 属性设置内容右侧的最小宽度... http://www.w3schools.com/cssref/pr_dim_min-width.asp

关于html - wrapper div 的宽度和 content right 的宽度应根据 content right 中的内容增加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11151872/

相关文章:

javascript - 如何生成并共享文件?

html - 改变h2的颜色

javascript - php html 输入文本字段

javascript - 无法使用 CSS 正确格式化嵌套表格

javascript - 如何从另一个 HTML 页面调用函数?

html - css:边框中的图像

JavaFX - css 在我的元素中不起作用,但可以在场景生成器中工作

css - 将两个三项对齐在同一行

html - HTML5 文本样式的良好实践

html - CSS 中心子菜单 WordPress