1

Não estou conseguindo alinhar as div's a direita em meu relatório mpdf. Abaixo contém o print do relatório e o código.

inserir a descrição da imagem aqui

Abaixo o código:

 </head>
    <style type='text/css'>
    .dados_principais {
            border: 1px solid black;
            border-top: 1px solid black;
            border-radius: 0.5em;
            margin-left: -1px;
            margin-right: -1px;
            margin-top: -1px;


           }
    </style>

    </head>
    <body>

    <div>

                <div class='dados_principais' style='text-align: center;margin-top: 4px;border: 1px solid red;background-color:#dcdcdc;'> 
                    <b><span style='font-style: italic; font-family: arial;'>
                        Teste de robos</span>
                        </b>
                    <div>
                    <div class='dados_principais' style='text-align: left;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
                        <div style='padding-left:3px; float:left; font-size: 9px;  '>1º Data</div>
                        <div style='padding-left:3px;'>
                        <span >". $data_inicio_ensaio ."<span>
                        </div>
                    </div>  

                    <div class='dados_principais' style='width:41%; margin-top: 0px;float:left;background-color:#ffffff;'>
                        <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                        <span style='visibility:hidden;' >.<span>


                    <div class='dados_principais' style='border: 1px solid black;width:41.50%; margin-top: 0px;float:left;background-color:#ffffff;'>
                        <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                        <span style='visibility:hidden;'>.<span>
                    </div>  

                    </div>




<div style='width:100%;text-align: left; margin-top: -1px;border: 1px solid blue;'>
                <div class='dados_principais' style='border: 1px solid black;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
                    <div style='padding-left:3px; float:left; font-size: 9px;  '>2º Data</div>
                    <span >". $data_inicio_ensaio2 ."<span>
                     </div>


                <div class='dados_principais' style='width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
                <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura</div>
                <span style='visibility:hidden;' >.<span>
            </div>  

                <div class='dados_principais' style='border: 1px solid black;width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
                <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
                <span style='visibility:hidden;'>.<span>
            </div>  
            </div>

Eu preciso que as divs(os dois campos assinatura) que estão ao lado do campo "1º Data", fiquem ao lado conforme as divs que estão na segunda linha "2º Data"

1 Resposta 1

1

Paulo o seu código tinha uma série de tag abertas, tinha div fechada no lugar errado etc...

Segue o seu código com a correção, apenas fechei as tags nos lugares corretos, e organizei basicamente o código.

Veja como ficou:

OBS: Aqui no snippet do StackOverflow ele fica meio quebrado pq a largura do box é pequena. Mas mande exibir em "Página toda" para ver melhor como fica. Ou então vc vai ter que usar os @media para tratar seu formulário em telas pequenas.

.dados_principais {
    border: 1px solid black;
    border-top: 1px solid black;
    border-radius: 0.5em;
    margin-left: -1px;
    margin-right: -1px;
    margin-top: -1px;
}
<div class='dados_principais' style='text-align: center;margin-top: 4px;border: 1px solid red;background-color:#dcdcdc;'>
    <b>
        <span style='font-style: italic; font-family: arial;'>Teste de robos</span>
    </b>
    <div style='width:100%;text-align: left;'>
        <div class='dados_principais' style='text-align: left;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
            <div style='padding-left:3px; float:left; font-size: 9px;  '>1º Data</div>
            <div style='padding-left:3px;'>
                <span>". $data_inicio_ensaio ."</span>
            </div>
        </div>

        <div class='dados_principais' style='width:41%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <span style='visibility:hidden;'>.</span>
        </div>

        <div class='dados_principais' style='border: 1px solid black;width:41.50%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <span style='visibility:hidden;'>.</span>
        </div>
    </div>

    <div style='width:100%;text-align: left; margin-top: -1px;border: 1px solid blue;'>
        <div class='dados_principais' style='border: 1px solid black;width:17%; margin-top: -1px;float:left;background-color:#ffffff; '>
            <div style='padding-left:3px; float:left; font-size: 9px;  '>2º Data</div>
            <div style='padding-left:3px;'>
                <span>". $data_inicio_ensaio2 ."</span>
            </div>
        </div>


        <div class='dados_principais' style='width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura</div>
            <div style='padding-left:3px;'>
                <span style='visibility:hidden;'>.</span>
            </div>
        </div>

        <div class='dados_principais' style='border: 1px solid black;width:39%; margin-top: 0px;float:left;background-color:#ffffff;'>
            <div style='padding-left:2px;  float:left; font-size: 9px;'>Assinatura </div>
            <div style='padding-left:3px;'>
                <span style='visibility:hidden;'>.</span>
            </div>
        </div>
    </div>
 </div>

3
  • 1
    Obrigado amigo, foi isto mesmo, problemas com abertura e fechamento de tag. 8/05/2018 às 17:47
  • @PauloGalego que bom que deu certo! Se a minha resposta te ajudou de alguma forma considere marca-la como Aceita, nesse ícone ✔ abaixo das setinhas no lado esquerdo da minha resposta :) assim o site não fica com perguntas abertas pendentes sem resposta aceita.
    – hugocsl
    9/05/2018 às 11:12
  • Verdade!! Esta marcada. Obrigado 10/05/2018 às 12:11

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 .