Imágenes apelotonadas

Inicio Foros WordPress Programación Imágenes apelotonadas

Etiquetado: 

Este debate contiene 2 respuestas, tiene 3 mensajes y lo actualizó  woofer hace 4 años.

  • Autor
    Publicaciones
  • #76675

    Wazz
    Participante

    Algo no me sale bien.

    Quiero poner, en 4 líneas, 4 imágenes de redes sociales junto al texto de su nombre Algo tal que

    (Icono Twitter) Twitter

    (Icono Facebook) Facebook

    (Icono Google Plus) Google Plus

    (Icono LinkedIn) LinkedIn

     

    Algo debo estar haciendo mal porque las imágenes se me apelotonan y no consigo que salgan 4 líneas con imagen + texto. No se me ocurre qué hacer.

    <div id=”Medioscontacto”> <div class=”CSociales”>

    <h4> Redes sociales </h4><img src=”http://urldondetengolaimagen.png” alt=”Twitter”>Twitter<img src=”http://urldondetengolaimagen.png” alt=”FB”>Facebook<img src=”httP://urldondetengolaimagen.png” alt=”Google Plus”>Google Plus<img src=”httP://urldondetengolaimagen.png” alt=”Linked In”>LinkedIn

    Y en CSS tengo:

    #Medioscontacto {
    width:100%;
    }

    #Medioscontacto img {
    float: left;

    }
    .Csociales {
    width:100%;
    }
    .Csociales img {
    float: left;
    display: block;
    }

    ¡Gracias!

  • #76676

    joelbello
    Participante

    Y si le pones el <br> ?

  • #76744

    woofer
    Participante

    Hay tienes la solucion , si por lo que sea no te funciona solo tendrias q poner el div q contiene la img y el texto width:100% asi te asegurarias.

     
    <div id=’Medioscontacto’> <div class=”CSociales”>

    <h4> Redes sociales </h4>
    <div><img src=”http://urldondetengolaimagen.png” alt=”Twitter”><span>Twitter</span></div>
    <div><img src=”http://urldondetengolaimagen.png” alt=”FB”>Facebook</div>
    <div><img src=”http://urldondetengolaimagen.png” alt=”Google Plus”>Google Plus</div>
    <div><img src=”http://urldondetengolaimagen.png” alt=”Linked In”><span>LinkedIn</span></div>

    Y en CSS tengo:

    #Medioscontacto {
    width:100%;
    }

    .Csociales {
    width:100%;
    }
    .Csociales img {
    float: left;
    display: block;
    }

     

El foro ‘Programación’ está cerrado y no se permiten nuevos debates ni respuestas.

Pin It on Pinterest

Ir al contenido