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
Ladrillo Reduce peso de imagenes en tu web WP skions 5 121 10-01-2019, 09:24 AM
Último mensaje: skions
  Problema con interlineado PabloA3 7 336 10-09-2018, 09:08 PM
Último mensaje: PabloA3
  Añade Marcas de agua a tus imágenes con Wordpress jcifuentes 1 158 02-06-2018, 07:57 AM
Último mensaje: ReyNexo23
  Wordpress problema [While Screen] yuma2009 4 739 03-02-2017, 04:04 AM
Último mensaje: yuma2009
  Evitar imágenes de productos borrosas en WooCommerce logoregion 2 980 25-03-2016, 06:46 AM
Último mensaje: garcon
  Problema con Contact Form 7 Caoba 13 914 27-08-2015, 12:34 PM
Último mensaje: TapaJerez
  Problema con dashboard de usuarios en wordpress Samo30 10 1,169 06-09-2014, 01:15 AM
Último mensaje: Samo30
  Problema plugin Tweet old post elena.bdc 2 594 05-06-2014, 10:49 AM
Último mensaje: Vicen
  Solucionado: Problema actualización Wordpress elena.bdc 5 633 19-05-2014, 01:52 PM
Último mensaje: elena.bdc
  Problema con widgets en mi blog Wordpress betiko2424 6 751 14-03-2014, 12:10 AM
Último mensaje: cbmontemayor



Usuarios navegando en este tema: 1 invitado(s)