2

Necesito que estas 3 cajas queden como en la imagen que adjunto: centradas horizontalmente, a la misma altura todas (ahora cada una baja un pelín más que la anterior), y que el fondo azul llegue hasta abajo.

Para que estas cajas aparezcan, hay que sobrevolar el div del título

resultado final

Snippet a continuación: ver en pantalla completa.

.seguros{
   background-color: deepskyblue;
    font-family: "Barrio";
    width: 100%;
    color: white;
    text-align: center;
    font-size: 2.5em;
    padding: 2% 0% 2% 4%;
}

.oculta {
  display: none;
  text-align: left;
  font-size: 0.52em;
  padding: 0.3% 0% 0% 0%; 
}

.seguros:hover .oculta {
    display: block;    
    color: #2c2b2b;
    font-family: "Questrial";
}

.ficha {
    border: 2px solid #2c2b2b;
    width: 25%;
    border-radius: 15px;
    margin: 1%;
    max-width: 450px;
    min-width: 300px;
    float: left;
    overflow: auto;
}

.container {
    padding: 2px 16px;
    background-color: #f1f1f1;
    font-size: 0.8em;
}

.promo {
    background: #ccc;
    padding: 3px;
}

.expire {
    color: deeppink;
}

#link{
  color: black;
  text-decoration: none;
}
<a id="link" href="seguros.html">    
    <div class="seguros">
      <p> >>>> Seguros & Hipotecas <<<<  </p>

                <div class="oculta">   
                     <div class="ficha">  
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel </span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
                
                 <div class="oculta">   
                     <div class="ficha"> 
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel</span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
                
                 <div class="oculta">   
                     <div class="ficha">   
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel </span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
    </div>
</a>   

1 respuesta 1

1

Para extender el fondo usamos overflow:auto para centrar text-align:center para que las cajas se comporten como si fueran letras y asi tomar el text-align del padre, usamos display:inline-block

.seguros{
   background-color: deepskyblue;
    font-family: "Barrio";
    width: 100%;
    color: white;
    text-align: center;
    font-size: 2.5em;
    padding: 2% 0% 2% 4%;
    overflow:auto;
    text-align:center;
}

.oculta {
  display: none;
  text-align: left;
  font-size: 0.52em;
  padding: 0.3% 0% 0% 0%; 
  max-width: 320px;
}

.seguros:hover .oculta {
    display: inline-block;    
    color: #2c2b2b;
    font-family: "Questrial";
}

.ficha {
    border: 2px solid #2c2b2b;
    width: 25%;
    border-radius: 15px;
    margin: 1%;
    max-width: 450px;
    min-width: 300px;
    float: left;
    overflow: auto;
}

.container {
    padding: 2px 16px;
    background-color: #f1f1f1;
    font-size: 0.8em;
}

.promo {
    background: #ccc;
    padding: 3px;
}

.expire {
    color: deeppink;
}

#link{
  color: black;
  text-decoration: none;
}
<a id="link" href="seguros.html">    
    <div class="seguros">
      <p> >>>> Seguros & Hipotecas <<<<  </p>

                <div class="oculta">   
                     <div class="ficha">  
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel </span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
                
                 <div class="oculta">   
                     <div class="ficha"> 
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel</span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
                
                 <div class="oculta">   
                     <div class="ficha">   
                          <div class="container">
                            <h4>Seguro baja autónomo</h4>
                          </div>
                          <img src="autonomo.jpg" alt="seguro autonomo" style="width:100%;">
                          <div class="container" style="background-color:white">
                            <h2><b>desde sólo 25€/mes</b></h2> 
                            <p>Cobras la baja entera según baremo, al 5ª día de presentarnos la baja</p>
                            <p>Sin visitas médicas</p>
                            <p>Incluye un seguro de vida</p>
                          </div>
                          <div class="container">
                            <p>Más información <span class="promo">tel </span></p>
                            <p class="expire">Expires: Jan 03, 2017</p>
                          </div>
                    </div>
                </div>
    </div>
</a>

4
  • hola, lo de overflow:auto; ha funcionado, pero al centrar quedan dos cajas en una linea muy separadas y 3a. caja se va abajo
    – Basicmix
    Commented el 8 abr. 2018 a las 20:27
  • no veo los cambios, sigue haciendo lo mismo
    – Basicmix
    Commented el 8 abr. 2018 a las 20:36
  • ahi te agregué un max-width al contenedor de las fichas, sin eso va a tratar de ocupar todo el espacio al que lo fuerza el hijo ficha con su width y max-width Commented el 8 abr. 2018 a las 20:43
  • el display: inline-block; tiene que ser none y el max-width hace que vaya una caja debajo de la otra y no al lado, ejecuta tu codigo y lo veras
    – Basicmix
    Commented el 8 abr. 2018 a las 20:50

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.