0

boa tarde a todos!! Pessoal, estou desenvolvendo uma aplicação que gera um pdf, e este pdf precisa ter uma determinada formatação, porém, estou um pouco perdido aqui... por exemplo, eu crio uma div, dentro, 3 spans...cada span eu quero que tenha 30% de largura, mas essa formatação nao renderiza nada...por que? Segue o "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>";

e abaixo, segue o CSS que estou usando...


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

Enfim,por que essa formatação não "pega" nas tags? muito obrigado pela atenção!!!!!

1 Resposta 1

1

A tag span é do tipo inline, ou seja, não adiante apenas vc declarar um min-width nela que não vai funcionar, para pegar um width no span vc tem que mudar para display:inline-block, assim o elemento muda de escopo e aceita alguns valores do box-model block

Deixei uns comments no código

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .