html - div宽度高度根据文本?

标签 html css

我想根据文本大小设置部分框的宽度和高度。我尝试使用下面的代码,它的工作但不是根据文本的节框的最佳宽度高度。我设计了三个 css id 第一个是#wbp_row 第二个是#wbp_col 最后一个是文本 id 名称是#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

#wbp_col{width: auto;}

因此部分是根据文本大小调整其高度和宽度。

关于html - div宽度高度根据文本?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22033558/

相关文章:

css - h :body tag 上的条件样式类

javascript - 带有引导框架的 extjs

javascript - 如何在 html 或 css 中禁用选择时的突出显示 View ?

javascript - News Ticker - 使用下一个和上一个按钮自动更改 div

javascript - 如何在 JavaScript 中操作 DOM 中的特定字符?

javascript - safari 扩展中弹出窗口下显示的 html 元素上的标题

html - 如何在 Bootstrap 3 中重新排序行

css - 为什么IE6和IE7没有完全显示这个div?

javascript - 如何移动 JQuery 子菜单

html - 在没有动画的情况下更改背景位置