Align image next to text, respecting vertical spacing

Question

Align image next to text, respecting vertical spacing

Navigation

#1 by (4 votes)
#2 by (2 votes)

4

I'm trying to make the images aligned to the right, respecting the spacing between the <p> tags, however it's getting like this:

Ineedsomethinglikethis:

MyHTMLcodelookslikethis:

<p><img style="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo-1-fixar-folha-de-sulfite.png"><b>Passo1:</b>Coloqueumafolhadepapelsulfitenochão,desuperfícieplanaefixecomfitaadesivaparaqueelanãosaiadolugar.</p><p><imgstyle="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 could not find it. I'm using Bootstrap if it's useful. I await a help: D

html css3 bootstrap-3

asked by anonymous 20.09.2018 / 23:25

2 answers

2

You can wrap contents 1 and 2 in divs and place them inside a " container " with display:flex as column . And in the% internals of steps you put counteiner with flex to put text on one side and image on another.

See 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><divstyle="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>

21.09.2018 / 00:56

score 4 · Accepted Answer

The way your code is, just put a margim-bottom in 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>Passo1:</b>Coloqueumafolhadepapelsulfitenochão,desuperfícieplanaefixecomfitaadesivaparaqueelanãosaiadolugar.</p><p><imgstyle="float:right" src="https://www.zaffiori.com.br/image/catalog/como-medir/passo2.png"><b>Passo2:</b>Posicioneoseupénafolhae,comumlápisoucaneta,façaocontornodoseupénopapel.</p>

Butsinceyouareusingbootstrapyoucandothis:

<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><divclass="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 would advise you to use the second option, so getting floats with bootstrap is not very suitable.