使用内联块会在dompdf

Question

当有两个或多个带有display:inline-block的元素时，这些元素在以pdf格式呈现后似乎在下面留有边距：

<div style="background-color:pink;">
    <div style="background-color:red;float:left;width:25%;">Hello</div>
    <div style="background-color:orange;float:left;width:25%;">Hello</div>
    <div style="background-color:yellow;float:left;width:25%;">Hello</div>
    <div style="background-color:green;float:left;width:25%;position:relative;">
        <div style="background-color:red;display:inline-block;width:25%;">Hello</div><!--
        --><div style="background-color:orange;display:inline-block;width:25%;">Hello</div>
    </div>
</div>

但是只有一个时，它会显示正常：

<div style="background-color:pink;">
    <div style="background-color:red;float:left;width:25%;">Hello</div>
    <div style="background-color:orange;float:left;width:25%;">Hello</div>
    <div style="background-color:yellow;float:left;width:25%;">Hello</div>
    <div style="background-color:green;float:left;width:25%;position:relative;">
        <div style="background-color:red;display:inline-block;width:25%;">Hello</div>
    </div>
</div>

已经尝试在同级元素上使用clear:both并将其作为inline-block元素的包装，但这只会使它低于绿色div

也已经尝试使用float:left，就像它的父元素一样，但是使用它会导致元素重叠

是否有其他方法可以使浮动元素的子元素水平对齐？

Answer 1

如评论中所述，inline-block的默认样式为vertical-align: baseline，这可能会导致定位问题。将vertical-align: top或vertical-align: bottom添加到您的所有inline-blocks中以解决此问题。