2014-02-26 212 views
0

根据文字大小,我可以选择wana部分框宽度高度。我尝试使用下面的代码它的工作,但不是根据文本部分框的最佳宽度高度。我设计了三种CSS IDS月1日是#wbp_row二是#wbp_col和最后一个是文本ID名称#threedtext根据文字div宽度高度?

I try these codes with html5 and css3 techniques. 

我的CSS代码:

#wbp_row { 
position:relative; 
display:table; 
border:solid 1px #0F0; 
min-width:auto; 
max-width:960px; 
max-height:auto !important; 

margin: 0 auto; 

} 
#wbp_col { 
position:relative; 
display:table-row; 
width:320px; 
min-height:auto!important; 
border:1px solid #000; 
float:left; 
margin:0 0 0 0px; 
padding:0; 


} 

#wbp_row #threedtext { 
font-size:70px; 
    max-height:auto !important; 
text-align:center; 
font-family:Arial, Helvetica, sans-serif; 
/*text-shadow: 0px 4px 0px rgba(82,82,82,.80), 
     2px 4px 3px rgba(0, 0, 7, 0.50), 
     3px 8px 3px rgba(0,0,0,.40), 
     0px 12px 10px rgba(0,0,0,0.1);*/ 
     color: rgba(141, 198, 63, 1); 
     padding:0; 
     line-height:normal; 
     overflow:auto; 
     position:relative; 
     border:1px solid #F00; 

} 

HTML代码:

<section id="wbp_row"> 
<Section id="wbp_col"> 
<p id="threedtext">Web</p> 
</Section><!--Cols codes end--> 
<Section id="wbp_col"> 
<p id="threedtext">Brand</p> 
</Section><!--Cols codes end--> 
<Section id="wbp_col"> 
<p id="threedtext">Print</p> 
</Section><!--Cols codes end--> 
</section><!--row code end--> 
+0

http://jsfiddle.net/kx9Wq/链接已创建。我认为有条件的CSS会起作用。 –

+0

@ ch.smrutiranjan parida代码不工作,因为我需要它扩展高度更多! – user3060235

+0

但高度不符合文字 – user3060235

回答

0

如果您在“#wbp_col”像这样设置宽度:auto

#wbp_col{width: auto;} 

所以部分根据文字大小调整其高度和宽度。

+0

感谢@dheeraj ...您的上述代码还可帮助我删除错误 – user3060235