3

Vejam esse print que vcs vão entender o que esta acontecendo: http://imgur.com/a/B0zkV

Já verifiquei varias vezes o código e aparentemente não encontrei erro nenhum, segue a parte do html e css dessa classe:

HTML:

main .main-pagina .services-principal {display: table;background: #eee;margin-bottom: 100px}
main .main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
main .main-pagina .services-principal .services .services-bloco {padding: 20px 5px;display: table}
main .main-pagina .services-principal .services .services-bloco img {float: left;}
main .main-pagina .services-principal .services .services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
main .main-pagina .services-principal .services .services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
<div class="services-principal" id="servicos">
				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/profissional.png">
						<h3>Serviços</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/suporte.png">
						<h3>Suporte 24 Hrs</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/marketing.png">
						<h3>Marketing</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/inovacao.png">
						<h3>Inovação</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				<div class="services">

					<div class="services-bloco">
						<img src="images/icones/video.png">
						<h3>Edição de vídeos</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
					</div><!-- fim services-bloco -->

					<div class="services-bloco">
						<img src="images/icones/recuperacao.png">
						<h3>Recuperação de dados</h3>
						<span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
					</div><!-- fim services-bloco -->

				</div><!-- fim services -->

				</div><!-- fim services-principal -->

2 Respostas 2

2

Fiz uma alteração no seu código acrescentando o .services-bloco no seu CSS desta forma:

 .services-bloco{ width: 40%; float: left;}

Teste e verifique o código abaixo:

.main-pagina .services-principal {display: table; background: #eee;margin-bottom: 100px}
.main-pagina .services-principal .services {float: left;width: 49%;background: transparent;box-sizing: border-box;background: #eee;margin: 0;padding: 5px}
.services-bloco {padding: 20px 5px;display: table}
.services-bloco img {float: left;}
.services-bloco h3 {float: left;font-family: 'Raleway', sans-serif;font-size: 16px;color: #111;padding-left: 15px;margin-top: 10px;box-sizing: border-box;}
.services-bloco span {width: 100%;height: 100px;overflow: hidden;display: block;float: left;font-family: 'Raleway', sans-serif;font-size: 14px;color: #454545;padding-left: 48px;box-sizing: border-box;margin-top: 10px;line-height: 22px}
.services-bloco{ width: 40%; float: left;}
<div class="services-principal" id="servicos">
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/profissional.png">
         <h3>Serviços</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/suporte.png">
         <h3>Suporte 24 Hrs</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/marketing.png">
         <h3>Marketing</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/inovacao.png">
         <h3>Inovação</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
   <div class="services">
      <div class="services-bloco">
         <img src="images/icones/video.png">
         <h3>Edição de vídeos</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
      </div>
      <!-- fim services-bloco -->
      <div class="services-bloco">
         <img src="images/icones/recuperacao.png">
         <h3>Recuperação de dados</h3>
         <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
      </div>
      <!-- fim services-bloco -->
   </div>
   <!-- fim services -->
</div>
<!-- fim services-principal -->

6
  • tbm não deu certo, não sei mais o que fazer pois o erro é apenas na ultima classe services-bloco, já achei que era a ultima div com erro, então apaguei e copiei a classe services-bloco anterior no lugar da ultima e continua o problema Commented 8/01/2017 às 17:47
  • Você viu funcionando aqui ao executar? Ele aparece exatamente do lado na ultima classe. Já verificou o tamanho da imagem se são exatamente de tamanhos iguais?
    – viana
    Commented 8/01/2017 às 17:50
  • são todas do mesmo tamanho e altura Commented 8/01/2017 às 17:50
  • deu certo, eu fiz o que vc disse e ainda tava dando problema, ai usei o que vc disse e dei um width de 99% na classe services e deu certinho, vlw Commented 8/01/2017 às 17:59
  • @OtavioFagundes Blz. Boa Sorte! Abs.
    – viana
    Commented 8/01/2017 às 18:00
0

O que pude perceber é que a divque está errada pertence ao mesmo bloco de sua div anterior... Isso é um problema que vai ter de resolver no seu layout.

Uma solução rápida seria abrir um novo bloco services com a div errada e ficaria assim:

<div class="services-principal" id="servicos">
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/profissional.png">
            <h3>Serviços</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting</span>
        </div><!-- fim services-bloco -->
        <div class="services-bloco">
            <img src="images/icones/suporte.png">
                <h3>Suporte 24 Hrs</h3>
                <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting industry of the</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/marketing.png">
            <h3>Marketing</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry text of the printing and typesetting</span>
        </div><!-- fim services-bloco -->
        <div class="services-bloco">
            <img src="images/icones/inovacao.png">
            <h3>Inovação</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry typesetting</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/video.png">
            <h3>Edição de vídeos</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry the printing and typesetting industry</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
    <div class="services">
        <div class="services-bloco">
            <img src="images/icones/recuperacao.png">
            <h3>Recuperação de dados</h3>
            <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy</span>
        </div><!-- fim services-bloco -->
    </div><!-- fim services -->
</div><!-- fim services-principal -->

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 .