Colocar 3 avisos uno al lado del otro repartidos en el ancho y centrados (responsive)

[z3r0]

Alguien podría decirme como hacer que 3 avisos queden uno al lado del otro, centrados en página y repartidos en el ancho? de modo que si la pantalla es grande siempre queden centrados y equidistantes. y si es chica se junten en el medio (o se enconlumnen uno abajo del otro).

[javy7v]

Buenas, si solo quieres 3 divs que ocupen todo el ancho de la pantalla y que se adapten a pantallas de distintos tamaños supongo que con algo como esto te vale:

http://codepen.io/anon/pen/ZWPPQX

Esta con % cada div ocupa 32% en total 96% de la pantalla , mas 1% de margen a la derecha para separar los anuncios , es el 99%.

El height lo suelo dejar sin definir para que se adapte a la cantidad de contenido que vas a poner pero bueno si quieres que tengan el mismo aunque unos tengan mas contenido que otros pues les das el mismo.

Si ya quieres que los anuncios solo aparezcan cuando haces scroll , o clickas algo o lo que sea tienes que usar eventos ya sea con Javascript o Jquery.

Suerte!

[z3r0]

no abre el link y no puedo ver el código. Te importaría postearlo?

[Rafael]

El link sí está funcionando.

[javy7v]

A mi si que me funciona el link pero vamos que te lo copio aqui no pasa nada , aunque igual no te vale.

Código:

<div id="tablon">
  <div class="anuncio">Anuncio1</div>
  <div class="anuncio">Anuncio2</div>
  <div class="anuncio">Anuncio3</div>
</div>

Código:

.anuncio{
  position:relative;
  float:left;
  width:32%;
  height:100px;
  margin-right:1%;
  background-color:blue;
}

[MMG19941107]

Que tal, yo estoy muy casado con el framework bootstrap, entonces si me hablas de responsabilidad, te aconcejarias que indagaras un poco sobre este framework, ya que framework te proporciona las herramientas necesarias para que crees unas vistas con responsibidad muy eficientes y de forma facil, ademas que te da otros estilos que te seran de gran utilidad, para estos estilos que te comento un ejemplo seria.


<div class="container" >
<div class="row">
<!-- dentro de esto metes diferentes div con las clases col-lg col-md entre otras y dentro meteras tus contenidos y listo-->
</div>
</div>