0

Galera,

Como faço para colocar um texto de uma div no meio de uma outra div que possui duas fotos separadas.

<div>
<img>
<img>
</div>

<div>
<p></p>
<div>

Em amarelo e verde são as divs

Foto 1

Preciso que fique igual a esta imagem

inserir a descrição da imagem aqui

Obs: nao posso alterar a ordem do html, colocando o texto antes, ou dentro da div junto com as fotos.

Tentei mover a foto 2 com margim top até embaixo, e depois subir o texto com margin top negativo, mas ficou tudo fora do lugar, porque as imagens e o texto são enormes.

6
  • não pode alterar a ordem mas precisa colocar em outro lugar? difícil assim, só imagino colocando position: absolute na div com o texto e posicionando usando margin-top, mesmo assim não vai ficar tudo bonito, vai precisar colocar margin na segunda div, melhor seria colocar tudo na posição certa e evitar esse "ajustes" Commented 17/05/2018 às 19:54
  • Qual a necessidade de manter a ordem desse jeito? Siga o padrão de desenvolvimento, o único problema que vejo é a lógica que está seguindo. Commented 17/05/2018 às 19:55
  • Calma galera, as vezes é um html gerado dinamicamente que ele não tem acesso, só consegue mexer no css, ou algum template de wordpress e essas coisas. Mas pode ser que de para fazer sim só no CSS...
    – hugocsl
    Commented 17/05/2018 às 19:58
  • E o Box cinza é o que? Essas divs estão dentro de uma Section ou alguma outra div pai?
    – hugocsl
    Commented 17/05/2018 às 20:00
  • Então, eu estou no meu trabalho agora e estou editanto esta página superestagios.com.br/index/cadastroEmpresa.php Preciso concertar a parte RESPONSIVA, eu dividi a foto da esquerda em duas partes e preciso colocar o questionário entre as duas, se não o questionário vai ficar lá embaixo, e nao pode. Dá um inspecionar aí na página, e olha a parte responsiva
    – user96296
    Commented 17/05/2018 às 20:00

1 Resposta 1

0

Cara vou te dar um um exemplo, mas qual é a chance dele dar certo no seu projeto..... quase nenhum, pois tem muita coisa ai que pode bugar o layout, até por causa dos positions:absolut

Repare que primeiro o pai precisa de position:relative, depois o div das imagens precisa de position:absolut e o texto também. Repare que a segunda imagem tem um margin-top referente a altura do texto que vc vai ter que colocar na mão em px, não tem como ser dinâmico essa altura, mas talvez nem precise pelo que vi no site. Agora o texto que tem um margin-top de 500px, referente a altura da primeira imagem que tb tem 500px de altura. Tb precisei colocar display:block nas imagens para ficar uma embaixo da outra. Já viu que é uma gambiarra do car*lho né...

Veja o exemplo. tudo está no CSS, e a sua estrutura do HTML continua intacta.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.pai {
    position: relative;
}
.texto {
    margin-top: 500px;
    position: absolute;
}
.imgs{
    position: absolute;
}
.imgs img{
    display: block;
}
.mt {
    margin-top: 200px;
}
<div class="pai">

    <div class="imgs">
        <img src="http://placecage.com/500/500" alt="">
        <img class="mt" src="http://unsplash.it/500/500" alt="">
    </div>
    
    <div class="texto">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam amet architecto ipsam ducimus debitis minus eum quaerat ratione expedita nulla odit, accusamus magni nesciunt eligendi id dolore libero porro vero, laboriosam eius eveniet repellat? Voluptas explicabo dolor quod deserunt soluta debitis facilis tempora recusandae sunt voluptate quisquam dolorem suscipit accusantium ipsum placeat voluptates, quis, optio ab maiores dicta aperiam labore nemo doloremque similique! Recusandae doloremque, aut beatae quam maiores quia? Quis repellendus inventore facere corporis deserunt. Nobis ipsum a quisquam? Mollitia, autem. Sequi facilis recusandae quo sunt voluptates consectetur, obcaecati aliquid minima nemo, nihil iusto magnam assumenda nulla? Veniam, est?</p>
    <div>

</div>

4
  • é exatamente assim que quero, mas como o projeto aqui é bem grande, fazer funcionar desse jeito é tenso... Pegar sites poluídos pra mexer é tenso demais kk Irei tentar fazer isso, obrigado.
    – user96296
    Commented 17/05/2018 às 20:22
  • O código desse site tá completamente poluído, varias divs desnecessárias, entre outros... mas acontece né hehe
    – user96296
    Commented 17/05/2018 às 20:22
  • ée... nao deu haha coloquei exatamente, mas bugou tudo kk até o cabeçalho que é inserido por include de outra pagina, desconfigurou... com esses positions absolute, relative, etc... aconteceu muitas coisas que nem dá pra escrever kkk, mas enfim, obrigadão. Que eu não seja despedido kkk
    – user96296
    Commented 17/05/2018 às 20:46
  • Cara mexem com esse tipo de template é phoda, ainda mais em PHP. Por isso eu particularmente não uso, eu gosto de ter controle das coisas entende. Eh já imaginava que ia bugar já tinha falado rss, mas vai que da certo né... Vc pode tentar também usando display:flex e colocar order nos elementos. Da uma estudada nisso, as fezes pode ser uma opção tb
    – hugocsl
    Commented 17/05/2018 às 21:06

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