div宽度高度根据文本? [英] div width height according text?

查看:140
本文介绍了div宽度高度根据文本?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

I wana部分框宽度高度根据文字大小。我试着用下面的代码它的工作,但不是最佳的宽度高度的部分框根据文本。我设计三个css ids第一是#wbp_row第二是#wbp_col和最后一个是文本id名称是#threedtext

I wana section box width height according text size. i try with below codes its working but not best width height of section box according to text. I design three css ids 1st is #wbp_row second is #wbp_col and last one is text id name is #threedtext

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


推荐答案

像这样

#wbp_col{width: auto;}

因此,部分会根据文字大小调整其高度和宽度。

So section is adjust its height and width according to text size.

这篇关于div宽度高度根据文本?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆