Как я могу разместить img и элементы друг к другу в TCPDF? - PullRequest
Новая
       4

Как я могу разместить img и элементы друг к другу в TCPDF?

0 голосов
/ 17 марта 2020

Я обнаружил новую проблему в TCPDF (новая для меня), ie Я не могу разместить элементы рядом друг с другом. Я пробовал так много решений, но в итоге они были нулевыми. Похоже, что 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>

Заранее спасибо за ответы!

Ответы [ 2 ]

0 голосов
/ 20 марта 2020

Хорошо, нашел метод, я изменил весь фреймворк на другой (dompdf), который проще в использовании и поддерживает более новый CSS.

0 голосов
/ 17 марта 2020

Может быть, это ваша проблема:

Вы добавляете это: 

.protHeader div{
    width: 100%;
}

, что означает, что каждый <div> в вашем классе .protHeader имеет 100% width.

РЕДАКТИРОВАТЬ: (я изменяю последнюю часть css и окрашиваю div-блок inline-block красным, чтобы увидеть, что они должны оставаться рядом друг с другом)

Попробуйте удалите эту строку или измените свой стиль на: 

.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>
...