Question

我重新发布这篇帖子，因为没有找到任何合适的答案。我尝试使用下面的代码，根据文字，它的工作但不是最佳宽度的剖面框高度。我设计了三个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-->

Answer 1

只需写下css规则：Demo

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

Answer 2

只需在width:320px;

删除#wbp_col即可

然后

将width:auto;添加到#wbp_col

然后将margin:0提交给#wbp_row #threedtext

截面标签宽度高度根据文字？

2 个答案: