Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Duda Problema espaciados en imagenes
#1
Buenas tardes señores!!! Te comento! Estoy haciendo mi web y me ha surgido un problema, y el otro dia me pudiste ayudar, y me gustaria que si es posible me echases una mano [Imagen: smile.gif]
Os comento: Quiero poner una fila de 3 imagenes y abajo poner un texto, pero cuando pongo un texto debajo de la imagen se queda el texto muuuy abajo:
Mi problema: https://gyazo.com/3c328266471e3dda73091822b971f903
Como quiero que se quede: https://gyazo.com/c51df9a853c8196d6f7e7b15dd816d6d
Mi web: Hogarled.com
La web de la que he cogido el ejemplo: Avesexoticas.org

Muchisimas gracias y espero que me echéis una mano [Imagen: wink.gif]
#2
Hola,

No tienes la misma estructura pero para poner bien el texto seria con esta modificación.

Código:
<p><img class="alignnone wp-image-286" src="https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb-300x192.png" alt="Tira LED" width="260" height="167" srcset="https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb-300x192.png 300w, https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb.png 390w" sizes="(max-width: 260px) 100vw, 260px"></p>
<h3 style="margin-top: -3%;"><span style="font-family: 'arial black', sans-serif;font-size: 12pt;">Tiras LED</span></h3>
WWW
#3
(14-09-2018, 05:10 PM)Vicen escribió: Hola,

No tienes la misma estructura pero para poner bien el texto seria con esta modificación.

Código:
<p><img class="alignnone wp-image-286" src="https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb-300x192.png" alt="Tira LED" width="260" height="167" srcset="https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb-300x192.png 300w, https://hogarled.com/wp-content/uploads/2018/09/tira-led-rgb.png 390w" sizes="(max-width: 260px) 100vw, 260px"></p>
<h3 style="margin-top: -3%;"><span style="font-family: 'arial black', sans-serif;font-size: 12pt;">Tiras LED</span></h3>

Perfecto! Y cual es la variación? Como podría aplicarlo a las siguientes fotos/texto que ponga?
Un saludo y gracias
#4
Aquí te dejo la estructura de la página y una demostración.

DEMO

Código:
.flex-fluid {
   margin-right: -1rem;
   margin-left: -1rem;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.flex {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.flex {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.entry-item {
   padding: 1rem;
   width: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
   max-width: 30%;
}

body {
   font-family: "Lato",Arial,"Helvetica Neue",Helvetica,sans-serif;
   font-size: 1rem;
   color: #333;
   line-height: 1.5;
   word-wrap: break-word;
   overflow-x: hidden;
   background-color: white;
}
html {
   font-size: 16px;
   -ms-overflow-style: scrollbar;
   -webkit-tap-highlight-color: transparent;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}


.entry-header .wp-post-image {
   width: 100%;
   margin-bottom: .5rem;
   border: 1px solid #eee;
}

img, video {
   height: auto;
}

* {
   margin: 0;
   padding: 0;
   outline: 0;
   -webkit-overflow-scrolling: touch;
}

Código:
<div class="flex flex-fluid">
                        <article id="post-41" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/periquitos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/05/periquitos-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Periquitos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-131" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/agapornis/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/05/cabeza-de-un-agaporni-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Agapornis</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-451" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/loros/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/Chestnut-fronted_Macaw_Ara_severa_-Free_Flight_Aviary_-San_Diego-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt="loros"><h3 class="entry-title">Loros</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-45" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/palomas/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/05/shutterstock_471496415-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Palomas</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-492" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/tucan/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/maxresdefault-9-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Tucán</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-505" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/jilguero/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/unnamed-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Jilguero</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1653" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/colibri/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/09/shutterstock_579510889-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Colibrí</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1545" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/buhos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/09/paxton_1-052517-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Búhos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-529" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/canario/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/shutterstock_333648236-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Canario</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-449" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/guacamayos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/50012030-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt="Guacamayos"><h3 class="entry-title">Guacamayos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-456" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/cacatuas/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/Cacatua_galerita1-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Cacatúas</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-475" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/cotorras/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/cotorra-de-kramer-1-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Cotorras</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-520" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/pinzones/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/06/shutterstock_313634765-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt="Pinzones"><h3 class="entry-title">Pinzones</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1379" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/patos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/08/shutterstock_647425321-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Patos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1395" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/ruisenor/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/08/shutterstock_96696562-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Ruiseñor</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1707" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/cuervos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/10/shutterstock_695211337-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Cuervos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1409" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/gallinas/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/09/shutterstock_113623774-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Gallinas</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-1945" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/flamencos/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/10/shutterstock_560911615-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Flamencos</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-2220" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/cisne/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/11/wall-1378378346_white-swan-on-a-lac-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Cisne</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-2231" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/albatros/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/11/albatros-agua-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Albatros</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article><article id="post-2672" class="entry-item column-third">
            <header class="entry-header">
        <a href="https://avesexoticas.org/alcedines/" rel="bookmark">
            <img width="390" height="200" src="https://avesexoticas.org/wp-content/uploads/2017/12/3-5-390x200.jpg" class="attachment-thumbnail-center size-thumbnail-center wp-post-image" alt=""><h3 class="entry-title">Alcedines</h3>        </a>
    </header><!-- .entry-header -->
    <div class="entry-meta">
        
                    </div>
</article>
        </div>
WWW
#5
(14-09-2018, 05:47 PM)Vicen escribió: Aquí te dejo la estructura de la página y una demostración.

DEMO

Código:
.flex-fluid {
   margin-right: -1rem;
   margin-left: -1rem;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   justify-content: center;
}

.flex {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.flex {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-flex: 0;
   -ms-flex: 0 1 auto;
   flex: 0 1 auto;
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
   -ms-flex-direction: row;
   flex-direction: row;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.entry-item {
   padding: 1rem;
   width: 100%;
   -ms-flex-preferred-size: 100%;
   flex-basis: 100%;
   max-width: 30%;
}

body {
   font-family: "Lato",Arial,"Helvetica Neue",Helvetica,sans-serif;
   font-size: 1rem;
   color: #333;
   line-height: 1.5;
   word-wrap: break-word;
   overflow-x: hidden;
   background-color: white;
}
html {
   font-size: 16px;
   -ms-overflow-style: scrollbar;
   -webkit-tap-highlight-color: transparent;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}
*, *:before, *:after {
   -webkit-box-sizing: inherit;
   box-sizing: inherit;
}


.entry-header .wp-post-image {
   width: 100%;
   margin-bottom: .5rem;
   border: 1px solid #eee;
}

img, video {
   height: auto;
}

* {
   margin: 0;
   padding: 0;
   outline: 0;
   -webkit-overflow-scrolling: touch;
}
Este es el que deberia aplicar a la web como css? Saludos
#6
Si ahí te deje el css y el html.
WWW
#7
Perfecto, pues muchísimas gracias!
#8
(14-09-2018, 08:07 PM)PabloA3 escribió: Perfecto, pues muchísimas gracias!


No hay de qué.
[-] El post de Vicen tiene 1 Me Gusta de parte de:
  • PabloA3
WWW
#9
EDIT: Ahora cuando pongo el css que me pasaste lo que me pasa esque se me desforma el menu principal y las letras de debajo de la foto siguen igual, a que se debe?
Lo siento por las molestias y gracias Sonrisa

Me refiero cuando lo pongo en css adicional en la web
#10
Muéstrame que parte exactamente se te deforma yo lo veo bien excepto sin cambios mencionados.
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Problema con interlineado PabloA3 7 233 10-09-2018, 09:08 PM
Último mensaje: PabloA3
  Añade Marcas de agua a tus imágenes con Wordpress jcifuentes 1 108 02-06-2018, 07:57 AM
Último mensaje: ReyNexo23
  Wordpress problema [While Screen] yuma2009 4 627 03-02-2017, 04:04 AM
Último mensaje: yuma2009
  Evitar imágenes de productos borrosas en WooCommerce logoregion 2 866 25-03-2016, 06:46 AM
Último mensaje: garcon
  Problema con Contact Form 7 Caoba 13 785 27-08-2015, 12:34 PM
Último mensaje: TapaJerez
  Problema con dashboard de usuarios en wordpress Samo30 10 1,021 06-09-2014, 01:15 AM
Último mensaje: Samo30
  Problema plugin Tweet old post elena.bdc 2 549 05-06-2014, 10:49 AM
Último mensaje: Vicen
  Solucionado: Problema actualización Wordpress elena.bdc 5 576 19-05-2014, 01:52 PM
Último mensaje: elena.bdc
  Problema con widgets en mi blog Wordpress betiko2424 6 682 14-03-2014, 12:10 AM
Último mensaje: cbmontemayor
  Problema con Publicidad en Header cyan 1 330 20-02-2014, 02:34 PM
Último mensaje: koruitch



Usuarios navegando en este tema: 1 invitado(s)