how to create css for pdf

Question

Good afternoon to all!! Guys, I’m developing an application that generates a pdf, and this pdf needs to have a certain formatting, however, I’m a little lost here... for example, I create a div, inside, 3 spans...each span I want to be 30% wide, but this formatting does not render anything...why? Follow the "html"

$html.="<div class='divs'>";
   $html.="<span>1</span><span>2</span><span>3</span>";
$html.="</div>";

$html.="<div class='divs'>";
   $html.="<span>1</span><span>2</span><span>3</span>";
$html.="</div>";

and below, follow the CSS I’m using...

.divs{
    border:1px solid red;
    line-height: 50px;
    width: 99%;
    position: relative;
    margin-bottom: 3px;
}
.divs span{
    position: relative;
    min-width: 30%;
    border:1px solid purple;
}

Anyway, why doesn’t this formatting "catch" on the tags? thank you very much for your attention!!!!!

Answer 1

The tag span is the type inline, that is, no longer only you declare a min-width on it that won’t work, to catch a width in the span you have to change to display:inline-block, so the element changes scope and accepts some values of the box-model block

I left some comments on the code

.divs {
    border: 1px solid red;
    line-height: 50px;
    width: 99%;
    position: relative;
    margin-bottom: 3px;
    /*para alinhar os span no centro*/
    text-align: center;
}

.divs span {
    position: relative;
    min-width: 30%;
    border: 1px solid purple;
    /* para os spans pegarem o width */
    display: inline-block;
}

<div class='divs'>
    <span>1</span><span>2</span><span>3</span>
</div>

<div class='divs'>
    <span>1</span><span>2</span><span>3</span>
</div>