html - linea - lista de codigos css

¿Cómo cambiar los elementos horizontales de nivel de bloque a elementos verticales después del ancho específico?

Question

Tengo tres <div> que están uno al lado del otro (horizontalmente). Ahora quiero cambiarlos para seguirlos uno después del otro (verticalmente) después de esto:

@media (max-width: 519px) { // all elements get vertical position }

Por defecto, estarán uno debajo del otro paso a paso, pero quiero que todos los elementos se sigan el uno al otro al mismo tiempo. También aquí hay un violín , puedes cambiar el ancho de la página y verás que en la primera <div3> se descompondrá, y si reduces el ancho de la página más, verás que <div2> también se descompondrá. Aunque quiero que ambos se rompan al mismo tiempo (receptivo, como una cuadrícula) .

¿Cómo puedo hacer eso?

HTML:

<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>

CSS:

.one,.two,.three{
border: 1px solid;
float: left;
margin: 5px;
width: 25%;
text-align: center;
padding: 15px;
}
@media (max-width: 519px) {
.one,.two,.three{
border: 1px solid red;
}
}

Answer 1

¿Presumiblemente quiere decir que por debajo de 520px le gustaría que se 520px verticalmente, pero de lo contrario uno al lado del otro? Haría esto en lugar de flotar. (Debe tenerse en cuenta que debe eliminar float: left; en sus códigos CSS)

div { display: inline-block; }
@media (max-width: 519px) {
div { display: block; }
}

Answer 2

Agregar width: 100% a esto:

@media (max-width: 519px) {
.one,.two,.three{
border: 1px solid red;
width: 100%;
}
}

¿Eso debería hacer el trabajo?

Answer 3

Puede establecer el ancho de div igual al ancho de la ventana bajo la regla de consulta de medios.

.one,.two,.three{
border: 1px solid;
float: left;
margin: 5px;
width: 25%;
text-align: center;
padding: 15px;
}
@media (max-width: 519px) {
.one,.two,.three{
border: 1px solid red;
width:100%; /*Check this*/
}
}

<div class="one">div1</div>
<div class="two">div2</div>
<div class="three">div3</div>

Compruebe jsFiddle aquí

Answer 4

Simplemente apague flotante:

@media (max-width: 519px) {
.one,.two,.three{
border: 1px solid red;
float: none;
}
}