对齐包含HTML中的换行符的大文本和小文本

Question

我目前正在将Illustrator资产从我们的平面设计师切割成HTML，而且设计的一部分我不确定如何最好地代表：

想象一下使用基于表格的布局并不难，例如

<table>
  <tr>
     <td>TDC <br/> CHANNEL</td>
     <td>B</td>
  </tr>
</table>

并改变B的字体大小直到看起来正确。但在HTML中表示这种设计似乎确实是对正确排版的挑战，并且使用表格似乎是邪恶的。我想知道是否有更好的方法？

Answer 1

样式化并使用语义标记：

http://jsfiddle.net/kboucher/pXyrd/

<dl class="clearfix">
    <dt>TDC<br />Channel</dt>
    <dd>B</dd>
</dl>

dl {
    background: #B5B8BE;
    color:#415987;
    display:inline-block;
    font-family: Helvetica, Arial, sans-serif;
    padding:1.5% 1% 1%;
}
dt {
    clear: left;
    float:left;
    font-size:0.8em;
    line-height:1em;
    text-transform: uppercase;
}

dd {
    float:left;
    font-size:2.1em;
    font-weight: bold;
    line-height:1em;
    margin: -0.1em 0 0 0.1em;
}
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

Answer 2

我不确定我是否完全理解您的问题，但您可以查看CSS中的'text-indent'属性（可能为大文本创建一个类，然后将您的HTML包装在<span class="largeText></span>中。它接受负值，所以请记住这一点。如果你提供更多信息，我可以想出其他的东西。

Answer 3

看起来你可以在TDC和CHANNEL之间留下中断并将其包含在div中，然后将大B放入div使用css来完成其余的工作....

或尝试使用现有的休息时间并将大B放入范围