5

Estou tentando deixar as imagens alinhadas à direita, respeitando o espaçamento entre as tags <p>, porém está ficando da seguinte forma: inserir a descrição da imagem aqui

Eu preciso de algo nesse estilo: inserir a descrição da imagem aqui

Meu código HTML está da seguinte forma:

<p><img style="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo-1-fixar-folha-de-sulfite.png"><b>Passo 1:</b> Coloque uma folha de papel sulfite no chão, de superfície plana e fixe com fita adesiva para que ela não saia do lugar.</p>
<p><img style="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo2.png"><b>Passo 2:</b> Posicione o seu pé na folha e, com um lápis ou caneta, faça o contorno do seu pé no papel.</p>

Procurei por alguma solução nesse estilo e não encontrei. Estou usando Bootstrap, se for útil. Aguardo uma ajuda :D

1
  • Se está utilizando bootstrap pq não usa o grid e as classes dele para posicionar?
    – LeAndrade
    20/09/2018 às 21:38

2 Respostas 2

5

Do jeito que está seu código é só colocar um margim-bottom no p:

p{
  margin-bottom: 110px;
}
<p><img style="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo-1-fixar-folha-de-sulfite.png"><b>Passo 1:</b> Coloque uma folha de papel sulfite no chão, de superfície plana e fixe com fita adesiva para que ela não saia do lugar.</p>
<p><img style="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo2.png"><b>Passo 2:</b> Posicione o seu pé na folha e, com um lápis ou caneta, faça o contorno do seu pé no papel.</p>

Mas como está utilizando bootstrap pode fazer assim:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<div class="row">
  <div class="col-sm-10 col-md-10">
    <p><b>Passo 1:</b> Coloque uma folha de papel sulfite no chão, de superfície plana e fixe com fita adesiva para que ela não saia do lugar.</p>
  </div>
  <div class="col-sm-2 col-md-2"> 
    <img src="https://www.zaffiori.com.br/image/catalog/como-medir/passo-1-fixar-folha-de-sulfite.png">
  </div>
</div>

<div class="row">
  <div class="col-sm-10 col-md-10">
    <p><b>Passo 2:</b> Posicione o seu pé na folha e, com um lápis ou caneta, faça o contorno do seu pé no papel.</p>
  </div>
  <div class="col-sm-2 col-md-2">
    <img src="https://www.zaffiori.com.br/image/catalog/como-medir/passo2.png">
    </div>
</div>

Aconselho a utilizar a segunda opção, pois, ficar utilizando floats com bootstrap não é muito indicado.

3

Vc pode envolver os conteúdos 1 e 2 em divs e colocar dentro de um "container" com display:flex em forma de column. E nos counteiner internos dos passos vc coloca o flex com justify-content: space-between para colocar o texto de um lado e a imagem de outro.

Veja como fica no exemplo abaixo:

<div style="display:flex; flex-direction:column">
    <div style="display:flex; justify-content: space-between;">
        <p>
            <b>Passo 1:</b> 
            Coloque uma folha de papel sulfite no chão, de superfície plana e fixe com fita adesiva para que
            ela não saia do lugar.
        </p>
        <img src="https://www.zaffiori.com.br/image/catalog/como-medir/passo-1-fixar-folha-de-sulfite.png">
    </div>
    <div style="display:flex; justify-content: space-between;">
        <p>
            <b>Passo 2:</b>
            Posicione o seu pé na folha e, com um lápis ou caneta, faça o contorno do seu pé no papel.
        </p>
        <img src="https://www.zaffiori.com.br/image/catalog/como-medir/passo2.png">
    </div>
</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 .