1

Estou utilizando o bootstrap 3.3.7 e estou com uma dúvida de como posicionar de forma correta uma imagem e um texto ao lado dela.

A imagem precisa estar "colada" no navegador e o texto ao lado dela e no responsivo, preciso que essa imagem ocupe 100% as laterais. Estou deixando uma imagem do que eu preciso.

inserir a descrição da imagem aqui

Eu até fiz uma forma mas acredito não ser a mais correta, pois na parte de baixo o texto e a imagem não ficam alinhadas.

Esse é um exemplo de como está meu código:

	.img-bus{
		margin-left: -30px;
	}
<div class="bg-amarelo">
  <div class="container-fluid">
    <div class="col-md-6">
      <img class="img-bus" src="assets/images/img.png">
    </div>
    <div class="container">
      <div class="col-md-6">
        <div class="content">
          <span class="before"></span>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat feugiat massa, sed rutrum ligula dignissim non. Mauris vehicula velit bibendum ligula sollicitudin consequat. Integer condimentum suscipit ante, id accumsan metus rutrum
            euismod. Maecenas imperdiet massa quis risus facilisis dapibus.</p><span class="after"></span>
        </div>
      </div>
    </div>
  </div>
</div>

https://jsfiddle.net/Stevecmv/trhtctrm/

1
  • Pra alinhar o texto com a imagem, os dois devem ter alguma relação: estarem na mesma div, ou, se estiverem em divs diferentes (como é o caso), as divs terem a mesma altura height. Pelo código que vc postou, não consegui traçar uma relação entre a imagem e o texto. Ambas estão na div-mãe "bg-amarelo", mas as divs de cada um estão separadas. Talvez se postasse mais algum código aí, ficaria melhor pra analisar. Por ex.: como o site é responsivo, a imagem irá variar de altura conforme a área do dispositivo, desta forma, a div que contem o texto deve ter alguma relação com essa altura para alinhar.
    – Sam
    Commented 24/08/2017 às 16:14

1 Resposta 1

0

Você pode fazer da seguinte forma:

<div class="container-fluid">
    <div class="col-md-6">
         <img class="img-bus" src="assets/images/img.png">
    </div>
    <div class="col-md-6">
         <p style="padding:50px 30px">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam feugiat feugiat massa, sed rutrum ligula dignissim non. Mauris vehicula velit bibendum ligula sollicitudin consequat. Integer condimentum suscipit ante, id accumsan metus rutrum euismod. Maecenas imperdiet massa quis risus facilisis dapibus.</p>
    </div>
</div>

Na tag p no trecho style="padding: npx npx", tendo n como um número qualquer, você pode alterar conforme o desejado para manter o texto "alinhado".

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 .