2

Possuo o seguinte código para gerar um owl carousel dentro de uma div do site que estou a desenvolver, porem qdo vou ver no html a tag <p> fecha antes da div do carousel, deixando o layout totalmente errado. Abaixo está o código que está presente no php:

<p class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</p> 

E abaixo está o código como é mostrado na web(Código visto pelo inspecionar elemento):inserir a descrição da imagem aqui

A tag <p> anteriormente era um <a href> e eu substitui ela pois eu achei que oque causou o erro era existir uma tag igual e ela dentro, porém após sua substituição o erro da tag fechando antes continuou, alguém teria alguma ideia do que pode ser?

1
  • Cara não sei te responder, mas tenta ir apagando linha por linha e ir testando, vai chegar um momento que você vai apagar uma linha (mantendo a estrutura html) que o erro vai desaparecer ai você vai saber onde está o erro e poderá buscar a solução. O esse deve ser nessas parada louca q vc arrumou ai cm o php, deve ser algum erro de string algo do tipo. Commented 1/01/2018 às 17:28

1 Resposta 1

5

A tag <p> não permite <div> dentro. Conforme informa o W3C nesta documentação:

The P element represents a paragraph. It cannot contain block-level elements (including P itself).

O elemento P representa um parágrafo. Não pode conter elementos block-level (inclusive o próprio P).

A div é considerada um elemento block-level (conforme esta documentação, também do W3C).

Quando você insere uma div em um elemento p, o p é fechado quando a div é aberta, e o navegador ainda adiciona outro <p></p> após. Exemplo:

Este código:

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

Resultará nisto:

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

Para solucionar isto, em lugar de <p>, use a própria tag div:

<div class="htlfndr-hotel-thumbnail">
    <div class="owl-carousel-search owl-theme htlfndr-hotel-thumbnail">
        <div class="item">
            <a href="#" data-toggle="modal" data-target="#imgModal" onclick="atualizaModal(\'thumb.php?src='.$strUrlSistema . $arrItemQuartoDisponivel['imagem'].'\');" >
              <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
            </a>
        </div>
        <div class="item">
            <img src="thumb.php?src=' . $strUrlSistema . $arrItemQuartoDisponivel['imagem'] . '&x=260&y=155&q=100&fill=false" alt="pic" />
        </div>
     </div>
</div>
0

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 .