0

Olá, estou criando um contrato em pdf e nele tenho duas colunas, mas ao quebrar página o restante do texto perde formatação, a solução que achei mais viável foi fazer a div da esquerda acompanhar a div da direita para não perder a formatação. Existem perguntas parecidas como está mais não conseguiu resolver meu problema. Deixar duas Divs sempre com a mesma height, Problema com altura de divs que não acompanham o conteudo uma da outra essas duas encontrei exemplos com table e table-cell, flex e não me ajudaram, a que cheguei mais perto foi nesse link Aumentando conteúdo da div dinamicamente mais não to conseguindo aplicar, será que alguém pode me ajudar.

Segue o que eu já fiz:

<style>
    #corpo {
    position: relative;
    text-align: justify;
    margin-left: 40px;
    margin-right: 40px;
    }
</style>

parte da estrutura

<div id="corpo" style="text-transform: uppercase;"><b>'.$resp2['ordem'].'. '.utf8_decode($resp2['nome_clausula']).'</b><hr></div>');
    while($resp3 = mysql_fetch_array($resul3)){
        $lista.='
            <div id="corpo">
                <div style="height: auto; max-width: 6%; overflow: auto; display: inline-block; background-color: red; "><b>'.$resp2['ordem'].'.'.$resp3['ordenar'].'</b>.</div>
                <div style="max-height: 100%; max-width: 93%; overflow: auto; display: inline-block; background-color: green; ">'.utf8_decode($this->palavraReservada($resp3['descricao'])).'</div>
            </div></br>&nbsp;';
    }

imagem do contrato como fica ao quebrar página imagem

5
  • Se te interessar uma solução que em vez de tentar corrigir isso, só evite que um bloco de conteúdo seja quebrado no meio, vc pode usar essa técnica pt.stackoverflow.com/questions/392268/… ou então outra sugestão seria mudar seu layout transformando o índice 5.1, 5.2 etc em um counter, ou mesmo usar uma OL/LI em vez de divs
    – hugocsl
    31/07/2019 às 17:30
  • Vc tb pode tentar alinhar esse número dentro do container com position:absolute, pode ser que de resultado, se quiser posso postar um código como resposta pra vc testar
    – hugocsl
    31/07/2019 às 17:38
  • Fica a vontade com exemplos, já testei tantos que fiquei meio perdido.
    – smourao
    31/07/2019 às 17:39
  • O exemplo que fiz ficou assim prntscr.com/omlxum se te interessar coloco como resposta pra vc testar
    – hugocsl
    31/07/2019 às 17:48
  • mais é isso mesmo que estou querendo fazer, estou tentando com OL/LI tb.
    – smourao
    31/07/2019 às 17:53

1 Resposta 1

1

Conforme conversado pelos comentários da pergunta segue uma opção de layout que pode te atender. Vc pode colocar position:absolute no número e um margin-left no texto, assim mesmo quebrando em duas páginas o texto continua alinhado, pois ele não depende de um elemento antes para ficar na posição, quem vai fazer esse papel agora é a margem a esquerda.

inserir a descrição da imagem aqui

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.corpo {
    position: relative;
    border: 1px solid #000;
}
.num {
    height: auto; 
    max-width: 6%; 
    overflow: auto; 
    display: inline-block; 
    background-color: red; 

    position: absolute;
    top: 0;
    left: 0;
}
.txt {
    max-height: 100%; 
    max-width: 93%; 
    overflow: auto; display: 
    inline-block; 
    background-color: green; 

    margin-left: 6%;
}
<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus amet expedita pariatur ipsum dolor in vitae rem, accusamus molestias quasi? Sequi obcaecati perspiciatis nobis quo corporis consequatur fuga iste iusto.</div>
</div>
<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus distinctio totam reprehenderit id ipsum quod, alias cupiditate iusto aliquid eum dolorem, eveniet nostrum deserunt veritatis natus. Dicta corrupti voluptas neque ea asperiores vitae voluptatum et assumenda maxime tenetur ipsum doloribus autem accusamus velit nulla quaerat nobis, sint reprehenderit atque. Nobis doloribus nihil, quasi quod eligendi commodi, numquam, maxime molestias nam soluta laborum corrupti deleniti reiciendis dolore impedit praesentium aliquid ut natus fuga debitis fugit nemo quia. Cumque voluptatum qui ullam quo, nam possimus aliquam sit modi ea eligendi magni dicta rerum mollitia provident quae. Iusto amet facere accusantium quisquam nostrum! Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam delectus nihil, doloribus architecto in iusto repudiandae earum similique officiis explicabo dolorum quibusdam quis distinctio officia. Ex quasi officiis voluptatum iusto totam labore, hic provident repellendus quaerat minus explicabo maxime optio neque maiores illum cum quo consectetur, sunt beatae aperiam quod sit corrupti. Est optio adipisci error libero nemo reiciendis asperiores quisquam, cumque consequatur officia incidunt veritatis voluptatem aut ipsum. Cum a ad illum quasi aut numquam accusantium dolorum non saepe quia illo, natus eaque dolor, consectetur voluptatem voluptates quam quae aliquid, beatae impedit! Alias, iusto. Necessitatibus nulla mollitia libero maiores ipsam quae officiis id? Ratione pariatur tempora non fuga tenetur animi eligendi aliquid alias ducimus perspiciatis exercitationem optio, cumque placeat est culpa itaque velit dignissimos quidem nisi in laboriosam obcaecati. Aliquam dolorem tempora iure amet magni voluptas perspiciatis. Deleniti ipsum similique necessitatibus temporibus mollitia dolorum perspiciatis facere cum aspernatur, obcaecati, repellendus, nesciunt fugiat unde dicta nobis harum! Harum voluptate totam omnis delectus quibusdam saepe asperiores amet nostrum adipisci ipsa, dolorum corporis nesciunt quis necessitatibus. Eaque velit eos dolores deleniti modi ea sapiente fugiat labore voluptatem voluptate rerum quas nobis tempore voluptas, iusto vitae, aspernatur corrupti saepe libero tenetur eligendi cupiditate nesciunt? Debitis quae, asperiores adipisci, voluptatum nostrum dignissimos quisquam corporis sapiente necessitatibus enim voluptatibus porro facere voluptates repellendus? Odio maiores atque, distinctio fugiat consectetur ratione mollitia suscipit cupiditate accusamus cumque, sit qui officia quibusdam, nam adipisci pariatur laudantium provident aut? Sed magnam deserunt nemo iste tempore itaque velit dolorum fugit ipsam officia suscipit modi optio aut earum porro labore obcaecati totam soluta, in fugiat. Debitis velit consectetur blanditiis voluptatem est quae accusantium porro non eius dolorem? Quis quod quo officia ad, voluptates nihil sit consequuntur, mollitia ea nemo vel tempora debitis obcaecati veniam explicabo commodi. Iste alias esse consequatur voluptatem reprehenderit sed odit numquam accusamus, libero dolorem aspernatur, molestias maxime labore nihil at iusto vero eaque dolorum praesentium illum natus quisquam quam! Modi saepe explicabo obcaecati culpa accusantium qui ex. Aspernatur esse optio odio quo nobis voluptatem atque maxime at, facilis, repellendus veritatis alias consectetur. Repellat, suscipit. Maxime, fugit? Est consequatur voluptate saepe excepturi numquam nulla doloremque, cumque obcaecati odio quidem adipisci voluptas? Molestias unde amet asperiores, blanditiis tempore ipsa nam obcaecati reprehenderit fugit beatae dolorum iusto atque odio optio? Dolores possimus, quaerat itaque dolorem doloremque sed, magnam laboriosam illum magni sunt alias quis saepe modi numquam quasi ratione voluptatem a, necessitatibus impedit cupiditate. Corrupti tenetur nostrum, quae facilis ducimus sint non expedita aut! Explicabo molestias maxime omnis, possimus et nihil adipisci magni excepturi laboriosam voluptates fugit officia nostrum cum tempora sed quia dignissimos. Et quae expedita quas deserunt dolores distinctio veniam nihil eum, sapiente consectetur pariatur vel odit nostrum quaerat repellat. Quaerat vero architecto voluptates quos rem pariatur praesentium soluta accusantium alias, illum vel consequuntur ad nam adipisci itaque molestias sint, corporis tenetur iure dolore! Expedita dolor dignissimos recusandae doloribus et voluptate eaque ipsam eos, nostrum itaque provident delectus quas vitae harum perferendis nisi animi! Laboriosam, eos. Nobis dolore unde numquam deleniti soluta officia minus commodi, reprehenderit quam perspiciatis id laboriosam porro nisi deserunt obcaecati. Labore accusantium, nostrum debitis quas ipsum ad. Obcaecati similique asperiores deleniti sunt, laudantium nulla dolorum earum consectetur nihil ea qui distinctio aperiam! Natus ipsum eius suscipit saepe praesentium voluptatum nesciunt, unde perspiciatis deleniti ipsa aliquid id excepturi maxime, qui reiciendis exercitationem quaerat? Corrupti natus dignissimos officiis fugit, velit quaerat pariatur ducimus autem eius, error animi numquam a quod alias distinctio doloremque nesciunt. Ullam nam quae veniam vel at dolore laudantium cupiditate asperiores eum vero quibusdam, ratione, tempora esse ea reiciendis sit aliquid. Minus obcaecati architecto nesciunt cumque, cupiditate quis quaerat, eveniet iste sed maiores ab expedita? Fugit, explicabo? Deleniti illum culpa quam ut! Accusantium culpa repellendus architecto nulla beatae optio accusamus quisquam, nisi praesentium iusto molestias reiciendis, esse excepturi quaerat necessitatibus? Rerum illum blanditiis, et soluta maxime esse cum earum voluptates tempora dicta quis reiciendis hic quidem iusto doloribus veritatis fugit nemo dignissimos. Labore, veritatis doloremque? Quasi eum quo doloribus ratione adipisci corrupti distinctio assumenda veritatis debitis, odio recusandae nostrum, quod modi cupiditate repellat corporis suscipit exercitationem laboriosam sequi necessitatibus esse possimus, voluptate quia. Inventore, accusamus natus nisi earum adipisci labore odio quis excepturi.</div>
</div>
<div class="corpo">
    <div class="num"><b>5.1</b>.</div>
    <div class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus distinctio totam reprehenderit id ipsum quod, alias cupiditate iusto aliquid eum dolorem, eveniet nostrum deserunt veritatis natus. Dicta corrupti voluptas neque ea asperiores vitae voluptatum et assumenda maxime tenetur ipsum doloribus autem accusamus velit nulla quaerat nobis, sint reprehenderit atque. Nobis doloribus nihil, quasi quod eligendi commodi, numquam, maxime molestias nam soluta laborum corrupti deleniti reiciendis dolore impedit praesentium aliquid ut natus fuga debitis fugit nemo quia. Cumque voluptatum qui ullam quo, nam possimus aliquam sit modi ea eligendi magni dicta rerum mollitia provident quae. Iusto amet facere accusantium quisquam nostrum!</div>
</div>

2
  • Funcionou certinho, muito obrigado pela ajuda.
    – smourao
    31/07/2019 às 18:25
  • @smourao demorou meu caro, tmj
    – hugocsl
    31/07/2019 às 18:27

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 .