Disculpas si esto ha sido respondido antes.

Tengo cuatro divs alineados horizontalmente, cada uno con una imagen y texto.

box box box box

Cuando reduzco el tamaño de la pantalla, quiero que estos se dividan por la mitad, para darme:

box box
box box

En lugar de lo que estoy recibiendo actualmente:

box box box
    box

Actualmente, cuando reduzco aún más el tamaño de la pantalla, se apilan como 2x2, dividiéndose en un diseño vertical en pantallas muy pequeñas (que aún deben hacer).

Js violín aquí: https://jsfiddle.net/zyrkstnk/

¿Algunas ideas? He estado jugando con & nbsp pero no puedo hacer que funcione. ¡Gracias!

0
ts123 24 dic. 2016 a las 00:06

3 respuestas

La mejor respuesta
#homethumbs {
	width: 100%;
	text-align: center;
}

.homethumb {
	width: 300px;
}
.homethumb, .wrap {
	display: inline-block;
}
<div id="homethumbs">
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
    <div class="wrap">
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
        <div class="homethumb">
            <img src="http://placehold.it/250x250">
            <h2>Start here with the basics</h2>
        </div>
    </div>
</div>
0
Banzay 25 dic. 2016 a las 13:43

¡Deberías probar flex!

#homethumbs {
    width: 100%;
    text-align: center;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-flow: wrap;
    -webkit-flex-flow: wrap;
    flex-flow: wrap;
}

.homethumb {
      flex: 0 0 50%;
    -webkit-flex: 0 0 50%;
    -ms-flex: 0 0 50%;  
}

@media (min-width: 1000px){

  .homethumb {
       flex: 0 0 25%;
    -webkit-flex: 0 0 25%;
    -ms-flex: 0 0 25%;  
  }

}

No olvides poner en la metaetiqueta viewport. Aquí está el video de este resultado: http://www.screencast.com/t/lYV6tFvhn9

0
Vcasso 23 dic. 2016 a las 21:22

Puede usar flex para el mismo y para dispositivos más pequeños, puede establecer que cada ancho de divs sea del 50% y configurar flex-wrap: con esto puede lograr una cuadrícula de 2 * 2

Mira este fragmento

#homethumbs {
  display: flex;
}
@media (min-width: 200px) and (max-width: 1000px) {
  #homethumbs {
    flex-wrap: wrap;
    width: 100vw;
    border: 1px solid;
  }
  .homethumb {
    width: 50vw;
  }
}
<div id="homethumbs">
  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>





  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>



  <div class="homethumb">
    <img src="http://placehold.it/250x250">
    <h2>Start here with the basics</h2>
  </div>
</div>

Espero que esto ayude

0
Geeky 23 dic. 2016 a las 21:26