Znalazłem nowy problem w TCPDF (nowy dla mnie), tj. Nie mogę umieszczać elementów obok siebie. Wypróbowałem tak wiele rozwiązań, ale ostatecznie były one zerowe. Wygląda na to, że TCPDF nie obsługuje konwersji ze wszystkich atrybutów css. Mam nadzieję, że możesz pomóc;) Kod, który próbowałem:

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

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

Z góry dziękuję za odpowiedzi!

0
Dajs 17 marzec 2020, 11:48

2 odpowiedzi

Najlepsza odpowiedź

Dobra, znalazłem metodę, zmieniłem cały framework na inny (dompdf), który jest łatwiejszy w użyciu i obsługuje nowszy CSS.

0
Dajs 20 marzec 2020, 19:28

Może to jest twój problem:

Dodajesz to:

.protHeader div{
    width: 100%;
}

To znaczy, że każdy <div> w Twojej klasie .protHeader ma 100% width.

EDYTUJ: (zmieniam ostatnią część css i pokolorowałem na czerwono elementy div inline-block, aby sprawdzić, czy powinny pozostać obok siebie)

Spróbuj usunąć tę linię lub zmień styl na:

.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>
0
J4R 17 marzec 2020, 17:57