Alinear a lo ancho dos elementos div respecto a otro
Publicado por Arturo (7 intervenciones) el 03/11/2022 19:07:44
Hola, buen día.
Estoy maquetando una sección de una página web, para practicar mis conocimientos sobre el tema. Resulta que me propuse el reto de hacer una página de ajedrez, sin embargo el problema surge cuando quiero alinear a lo ancho dos divs, para explicarme mejor les comparto una imagen:
Lo que me gustaría es que el tablero de ajedrez, defina el ancho de los otros dos divs rojos, o sea me gustaría que todo quedara en un cuadrado:
No importando que la sección "interfaz" se quede con espacios vacíos a los lados.
Intente determinar un ancho, fijando un tamaño, pero al emularlo para dispositivos móviles, este se descuadra totalmente, ya sea que termina siendo mas estrecho al ancho del tablero de ajedrez o mas largo.
Les comparto mi código html:
Y este es el código CSS:
Si se preguntan del layout, lo tengo distribuido con grid para designar las secciones de la web, les comparto como tengo el CSS para móviles:
Mientras que para resoluciones de 860px a más, lo tengo distribuido de la siguiente manera:
Desconozco si el problema viene desde el layout, ya que como lo tengo definido como "auto" supuestamente este se adapta al contenido de los elementos hijos.
De antemano agradezco su atención y su ayuda.
Saludos cordiales :)
Estoy maquetando una sección de una página web, para practicar mis conocimientos sobre el tema. Resulta que me propuse el reto de hacer una página de ajedrez, sin embargo el problema surge cuando quiero alinear a lo ancho dos divs, para explicarme mejor les comparto una imagen:
Lo que me gustaría es que el tablero de ajedrez, defina el ancho de los otros dos divs rojos, o sea me gustaría que todo quedara en un cuadrado:
No importando que la sección "interfaz" se quede con espacios vacíos a los lados.
Intente determinar un ancho, fijando un tamaño, pero al emularlo para dispositivos móviles, este se descuadra totalmente, ya sea que termina siendo mas estrecho al ancho del tablero de ajedrez o mas largo.
Les comparto mi código html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<section class="interfaz">
<div class="perfil2">
<div><img class="foto2" src="#" href="#"></div>
<div class="nick2"><a>Nick</a></div>
<div class="tiempo2">Tiempo2</div>
</div>
<div class="tablero">
<div class="box">♜</div>
<div class="box">♞</div>
<div class="box">♝</div>
<div class="box">♛</div>
<div class="box">♚</div>
<div class="box">♝</div>
<div class="box">♞</div>
<div class="box">♜</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♟</div>
<div class="box">♜</div>
<div class="box">♞</div>
<div class="box">♝</div>
<div class="box">♛</div>
<div class="box">♚</div>
<div class="box">♝</div>
<div class="box">♞</div>
<div class="box">♜</div>
</div>
<div class="perfil1">
<div><img class="foto1" src="#" href="#"></div>
<div class="nick1"><a>Nick</a></div>
<div class="tiempo1">Tiempo1</div>
</div>
</section>
Y este es el código CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.perfil2 {
display: flex;background-color: #af3232;
font-family: "Montserrat Alternates", sans-serif;
border-radius: 4px;
align-items: center;
padding: 10px;}.tablero {
grid-area: tablero;
display: grid;grid-template-columns: repeat(8, 1fr); /* Es para crear 8 columnas */
grid-template-rows: repeat(8, 1fr); /* Es para crear 8 filas */
background: repeating-conic-gradient(#c54411 0% 25%, #afc6d8 0% 50%) 50% / 25% 25%; /* Esto define el color de las casillas */
aspect-ratio: 1/1; /* Permite que las columnas y filas mantengan la misma medida, produciendo cuadrados */
max-height: calc(100vh - 150px); /* Permite que la pagina web sea responsive */
margin: auto; /* Esto es para centrar el tablero */
border: thin 1px solid;align-items: center;
justify-content: center;
text-align: center;
}.perfil1 {
display: flex;background-color: #af3232;
font-family: "Montserrat Alternates", sans-serif;
border-radius: 4px;
align-items: center;
padding: 10px; bottom: 0;}Si se preguntan del layout, lo tengo distribuido con grid para designar las secciones de la web, les comparto como tengo el CSS para móviles:
1
2
3
4
5
6
7
8
.grid_container {
display: grid; gap: 10px;grid-template:
"header" 5vh "interfaz" auto "informacion" auto;}Mientras que para resoluciones de 860px a más, lo tengo distribuido de la siguiente manera:
1
2
3
4
5
6
7
8
9
@media (min-width: 860px) {
.grid_container {
grid-template:
"header header" 5vh "interfaz informacion" auto / auto 40vw; }}Desconozco si el problema viene desde el layout, ya que como lo tengo definido como "auto" supuestamente este se adapta al contenido de los elementos hijos.
De antemano agradezco su atención y su ayuda.
Saludos cordiales :)
Valora esta pregunta
0
