display中的基线问题

当用display:inline-block来布局时,当div里面有文字时,布局

就会上下不在一个水平线,而且两个div之间会产生一条缝。如下图

所示

原因:字体下面有一条基线,就是最后一行字体所在的水平线,默认为基线对齐,

而左边只有一行字,右边有三行字,默认最后一行对齐,所以垂直方向不对齐。

而水平方向有一条线的原因是display:inline-block把块及标签改成了内联标签,然

后在代码中多了一个空格,所以有一条缝。

解决方法:

   垂直不居中:

        设置vertical-align: top,就是垂直对齐方式为从顶部对齐

   水平有缝:

1、  两个div之间不要空格。

<div class="bigbox">
    <div
class="left">
        <p>
左边第一行</p>
    </div><div
class="right">
       
右边第一行
       
右边第二行
        右边第三行
    </div>
</div>

2、  设置margin-left:-10px;

3、  在内部样式中设置font-size为0,调试的时候可以用内联样式来设置字体大小。

展开阅读全文

没有更多推荐了,返回首页