css精彩布局——仅一个点就能惊艳到你

最近，在浏览http://www.beijing-dentsu.com.cn/这个网站的时候，发现移动端页面产品页标题行布局甚为精妙。虽现在不知道具体原理，但其实现方法是优雅，简洁，遂以此片记录一二。

首先来看一下原网页的效果吧。

记得打开移动端奥

再来看一下它的DOM结构

DOM结构

它的DOM结构的顺序让我感到一阵新意，如果按照平常的写法。我肯定会吧a标签写在span标签的前面，让后在利用各种办法实现类型的功能，虽然效果相差无几，但是它这种写法，css代码之简洁，令人赞叹。

p.litemtitle span {
    font-size: 10px;
    margin-left: 20px;
}
p.litemtitle a {
    color: #000;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    /* width: auto; */
    display: block;
}
.fr {
    float: right;
}

代码很少，关键兼容性特别好，span标签脱离了文档流，与a标签位于同一列，a标签设置了display:block; 宽度实现auto自适应。