[SOLUCIONADO] Hilera de divs que queden horizontal

[Luisa29]

Hola amigos, resulta que tengo un problema, quiero mostrar en mi web principal 5 miniaturas de los últimos post de mi wordpress. Hasta ahí todo bien, pero quiero meter los 5 post o miniaturas en un div y que queden todos en horizontal, pero no hay forma, salen todos en fila y en vertical. ¿Podéis echarme una mano? Aquí el código:



CSS:

Código:

<style media="screen" type="text/css">
 #contenedor-miniaturas {
	width: 900px;
	height: 300px;
   	display: block; 
		
}
  .miniaturas-post {
	width: 150px;
	margin: 0 auto;
	height: 150px;



}
 
#thumbnail img{
    width: 150px;
    margin: 0px;
	float:right;
}
.view-sixth .mask {
	-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	float: right;
	opacity: 0;
	-webkit-transition: all 0.4s ease-in 0.1s;
	-moz-transition: all 0.4s ease-in 0.1s;
	-o-transition: all 0.4s ease-in 0.1s;
	-ms-transition: all 0.4s ease-in 0.1s;
	transition: all 0.4s ease-in 0.1s;
	background-color: rgba(0,51,204,0.5);
}


.view-sixth p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.4s ease-in-out 0.1s;
   -moz-transition: all 0.4s ease-in-out 0.1s;
   -o-transition: all 0.4s ease-in-out 0.1s;
   -ms-transition: all 0.4s ease-in-out 0.1s;
   transition: all 0.4s ease-in-out 0.1s;
}

.view-sixth:hover .mask {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 2;
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}
.view-sixth:hover img {
   -webkit-transition-delay: 0s;
   -moz-transition-delay: 0s;
   -o-transition-delay: 0s;
   -ms-transition-delay: 0s;
   transition-delay: 0s;
}

.view-sixth:hover p {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   -webkit-transition-delay: 0.2s;
   -moz-transition-delay: 0.2s;
   -o-transition-delay: 0.2s;
   -ms-transition-delay: 0.2s;
   transition-delay: 0.2s;
}
.view-sixth:hover a.info {
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
   -webkit-transition-delay: 0.3s;
   -moz-transition-delay: 0.3s;
   -o-transition-delay: 0.3s;
   -ms-transition-delay: 0.3s;
   transition-delay: 0.3s;
}
 
.view {
	width: 150px;
	height: 150px;
	overflow: hidden;
	position: relative;
	text-align: justify;
	cursor: default;
}
.view .mask,.view .content {
   width: 150px;
   height: 150px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img {
   display: block;
   position: relative;
}

.nombres-1 {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-style: normal;
	font-size: 13px;
	position: relative;
	color: #fff;
	text-align: center;
	padding-bottom: 14px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 33px;
	font-weight: bold;
	bottom: 12px;
}


.view a.info:hover {
   -webkit-box-shadow: 0 0 5px #000;
   -moz-box-shadow: 0 0 5px #000;
   box-shadow: 0 0 5px #000;
}
 
</style>

HTML:

Código:

<?php
define('WP_USE_THEMES', false);
require('wp-load.php');
query_posts('showposts=5');
?>

<div id="contenedor-miniaturas">
<div class="miniaturas-post">
<?php while (have_posts()): the_post(); ?>
<?php
        if ( has_post_thumbnail() ){
    ?>
    <div class="view view-sixth" style="height="150" width="150">
      <div id="thumbnail">
            <?php
            the_post_thumbnail( 'thumbnail' );
            ?>
        </div>
        
        
         <a href="<?php the_permalink(); ?>"><div class="mask">
     <p class="nombres-1"><?php the_title(); ?>
     </div></a>
</div>

    <?php
    }else{
        
        echo '<div id="thumbnail"><img src="thumbnail.png" alt="thumbnail" title="Example" width="256px"/>';
        echo '</div>';

    }
?>

<?php endwhile; ?>
</div>
</div>

[pzin]

No publiques código PHP por aquí, que aquí en CSS no sabemos nada de PHP.

Sólo tendrías que flotar los elementos contenedores de esas noticias:

Código CSS:

float: left;
 

[catucux]

Con todo respeto pregunto esto..

¿Tienes conocimientos basicos en CSS? Porque viendo tu codigo hay bastantes filtros avanzados de CSS y poner los bloques en horizontal es relativamente facil teniendo en cuenta la complejidad del codigo css que muestras.

Te recomendaria que pasaras por alguna guia de CSS y asi tendrias un poco mas de conocimiento.

Yo lo haria de la siguiente manera.

#bloque_horizontal{
position: relative;
display: inline-block;
width: 24%;
}

[pzin]

catucux ¿para qué la posición relativa en ese caso?

[Luisa29]

Muchas gracias a ambos por responder, de ninguna forma se ha solucionado el problema.
pzin el problema está en que el código php genera 5 cuadrados con noticias, pero sólo es un div para todo (donde va el código que genera las 5 últimas entradas del blog), a ver si va a estar ahí el fallo. Por ese motivo se muestran las 5 noticias en vertical. ¿podría ser?

catucux sé que la duda es muy tonta, pero no consigo resolverla, por eso pregunto. Lo he hecho otras veces en otras situaciones, pero esta vez no consigo colocarlo de forma horizontal.

[pzin]

Como digo, simplemente flotar los elementos que hacen de noticia, porque cada cual está en un div dentro de ese bucle.

Código CSS:

#contenedor-miniaturas {
  overflow: hidden; /* como clearfix */
}
 
#contenedor-miniaturas div.view {
  float: left;
}
 

[Luisa29]

Iniciado por pzin

Como digo, simplemente flotar los elementos que hacen de noticia, porque cada cual está en un div dentro de ese bucle.

Código CSS:

#contenedor-miniaturas {
  overflow: hidden; /* como clearfix */
}
 
#contenedor-miniaturas div.view {
  float: left;
}
 

siiiiiiii, SIIIIIIIIIIIIIIIIII !! TOMAYA !!
Muchas gracias pzin, joer a veces la solución está frente a mis narices y no logro dar con ella.

Mil millones de gracias !!