error text float beside image html

0

asked by anonymous 18.01.2017 / 04:39

1 answer

2

You can simply give a margin in the image using margin: 10px . See:

.img-responsive {
  margin: 10px
}

#skill1 {
}

#skill1 img{
	width:200px;
	background-color:#F60;
	float:left;	
}

#skill1 p {
	text-align:left;
	margin-top:5%;		
}

.img-responsive {
  margin: 10px
}
<div class="row">
   <div class="container-fluid">
      <div class="col-xs-12 col-sm-12" id="skill1">
         <img src="img/html.png" class="img-responsive img-thumbnail">
         <p> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
            As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
            Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
         </p>
      </div>
   </div>
</div>

Issue

This issue is to answer the question asked in the comments, so that the text stays below the borderless image from the left in cases of smaller screens.

.areaImagem{
    float:left;
    margin-top:10px;
    background: #ccc;
    
}

.areaImagem img{
    display: inline-blcok;
   width: 200px;
    margin:2%;
    vertical-align:top;
}

.areaTexto p{
    display: inline-block;
    width: 50%;
    margin:2%;
    vertical-align:top;
}
<div class="row">
   <div class="container-fluid">
      <div class="col-xs-12 col-sm-12" id="skill1">
        <div class="areaImagem">
          <img src="img/html.png" class="img-responsive img-thumbnail">
        </div>
         <div class="areaTexto">
         <p class="text"> Até algum tempo atrás, as animações nos sites eram feitas javascript ou flash. Com o surgimento do CSS 3 essa ideia vem mudando.
            As animações com CSS dão um show de performance, são mais fluidas e sem travamentos. Como nem tudo são rosas, elas só funcionam em navegadores mais modernos. E aí que se encaixa o Graceful Degradation.
            Em navegadores antigos, que não suportam essas animações, apresentamos o mesmo conteúdo, porém de uma maneira diferente sem perder nada em relação à acessibilidade.
         </p>
           </div>
      </div>
   </div>
</div>
    
18.01.2017 / 04:45