Align image next to text while respecting vertical spacing

Asked

Viewed 2,346 times

5

I’m trying to get the images aligned to the right, respecting the spacing between the tags <p>, but it’s getting like this: inserir a descrição da imagem aqui

I need something like that: inserir a descrição da imagem aqui

My HTML code is as follows:

<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>

I looked for some solution in this style and did not find it. I am using Bootstrap if it is useful. I look for a help :D

html css3 twitter-bootstrap bootstrap-3

  • Is using bootstrap pq does not use the grid and its classes to position?

2 answers

5


The way your code is, just put one margim-bottom in the 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>

But how are you using bootstrap can do so:

<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>

I advise using the second option, because staying using floats with bootstrap is not very suitable.

3

You can wrap the contents 1 and 2 in Divs and put inside a "container" with display:flex in the form of column. And us counteiner internal steps you put the flex with justify-content: space-between to put the text on one side and the image on the other.

See how it looks in the example below:

<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>

Browser other questions tagged html css3 twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.