Soy bastante nuevo en HTML y todavía estoy tratando de trabajar con DIV. Mi mayor problema es principalmente con la alineación de ciertos DIV / contenido sin cambiar el resto del contenido de la página.

Este es un ejemplo

enter image description here

Segundo ejemplo

enter image description here

En la primera captura de pantalla, puede ver un sitio web que elijo mostrar el "apilamiento" DIV desde múltiples lados. Es un ejemplo un poco más difícil que trato de crear, pero la idea es más o menos la misma (excepto la flecha de desplazamiento hacia abajo. Solo que puedo poner el contenido uno al lado del otro o debajo / encima del otro). En la segunda captura de pantalla, verá que solo se apilan de arriba a abajo. Como se mencionó un poco antes: generalmente tengo que mi contenido cambia alrededor de la página una vez que trato de agregar un nuevo div al lado.

¿Cuál es la forma más sencilla de obtener, por ejemplo, 4 DIV uno al lado del otro o en una ubicación similar a una ventana (ejemplo 1), y hacer que, por ejemplo, se adhiera a un contenedor principal en el medio de la pantalla?

Lo siento si mi pregunta es un poco vaga, mi terminología en inglés + no es tan sorprendente.

-1
vorkot1 10 sep. 2018 a las 10:48

3 respuestas

La mejor respuesta

Podrías intentar usar un flexbox

.container{
  display: flex;
  width: 80%;
  margin: 0 auto;
  flex-wrap: wrap;
}

.square{
  width: 50%;
  height:80px;
  border: 1px solid black;
  box-sizing: border-box;
}
<div class="container">

  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>
  <div class="square"></div>

</div>

Los bordes solo se agregan como indicación.

0
Thomas Scheffer 10 sep. 2018 a las 08:24

Bienvenido a stackoverflow.

Por defecto, los DIV son elementos de bloque, para alinearlos uno al lado del otro puede usar la propiedad CSS display: inline-block; .

Puede encontrar más detalles sobre la propiedad display css en esta página.

-1
Dhaval Panchal 10 sep. 2018 a las 07:55

Quizás esto es lo que estás buscando

.container {
  width: 80%;
  margin: auto;
}

.square1 {
  background-color: red;
  width: 50%;
  float: left
}

.square2 {
  background-color: blue;
  width: 50%;
  float: right;
}

.square3 {
  background-color: yellow;
  width: 50%;
  float: left
}

.square4 {
  background-color: orange;
  width: 50%;
  float: right;
}
<div class="container">
  <div class="square1">
    Something
  </div>

  <div class="square2">
    Something
  </div>

  <div class="square3">
    Something
  </div>

  <div class="square4">
    Something
  </div>
</div>
0
Carl Binalla 10 sep. 2018 a las 08:33