如何在 TCPDF 中将 img 和 a 元素相互放置？

Question

我发现了 TCPDF 中的一个新问题（对我来说是新问题），即我不能将元素彼此相邻放置。 我尝试了很多解决方案，但最终都是零。 似乎 TCPDF 不支持从所有 css 属性转换。 希望你能帮忙;) 我试过的代码：

<style>
.protHeader{
    position: relative;
    border: 2px solid black;
    display: table;
    height: 250px !important;
}
.protHeader div{
    width: 100%;
}
.protHeader div img{
    position: relative;
    display: inline-block;
    float: left;
    height: 100px;
    overflow: hidden;
}
.protHeader div a{
    position: relative;
    display: inline-block;
    text-align: right;
    horiz-align: right;
    overflow: hidden;
    float: right;
    font-weight: bold;
    font-size: 50px;
    width: 40% !important;
}
</style>

和 html：

<div class="protHeader">
    <div class="fl_left">
        <div style="border: 1px solid black;"><img src="$LogoN"></div>
        <div style="border: 1px solid black;"><a>$protocol</a></div>
    </div>
</div>

预先感谢您的回答！

Answer 1

也许这是你的问题：

你正在添加这个：

.protHeader div{
    width: 100%;
}

这意味着，类.protHeader中的每个<div>都有100% width 。

编辑：（我更改了 css 的最后一部分并将内联块 div 着色为红色，以便查看它们应该彼此相邻）

尝试删除此行或将样式更改为：

 .protHeader{ position: relative; border: 2px solid black; display: table; height: 250px !important; } .protHeader .fl_left{ width: 100%; } .protHeader div img{ position: relative; display: inline-block; float: left; height: 100px; overflow: hidden; } .protHeader div a{ position: relative; display: inline-block; text-align: right; overflow: hidden; float: right; font-weight: bold; font-size: 50px; width: 40% !important; } .protHeader .fl_left div { background-color: red; display: inline-block; }

 <div class="protHeader"> <div class="fl_left"> <div style="border: 1px solid black;"><img src="$LogoN"></div> <div style="border: 1px solid black;"><a>$protocol</a></div> </div> </div>

Answer 2

好的，找到了一个方法，我已经把整个框架改成了另一个（dompdf），它更容易使用并且也支持较新的CSS。