1

Quiero que la sección con la clase "personajes" guarde de manera horizontal dos elementos con clase "t" por lo que les he puesto col-6 para que cada uno ocupe la mitad del ancho de la sección personajes, pero aunque cada elemento con clase "t" ocupa sólo la mitad, cada elemento se ubica uno debajo del otro y no de dos en dos como deseo. Y ¿ cómo se haría para que el alto de la sección de los personajes no sea auto sino el mismo que el de la sección mapa, no importa que la sección personajes sea más extensa porque le podria poner un scroll. La idea es que la sección personajes quede al lado de la del mapa, por eso les he colocado col-8 a "mapa" y col-4 a personajes.

.mapa {
  background-color: antiquewhite;
  margin: 0%;
  padding: 0%;
}

.personajes {
  background-color: burlywood;
  margin: 0%;
  padding: 0%;
}

.t {
  background-color: cadetblue;
  margin: 0%;
  padding: 0%;
}
<div class="container">
  <div class="row">
    <div class="col-8 mapa">col-8 <br><br><br><br><br></div>
    <div class="col-4 personajes">
      <div class="col-6 t">oooooo <br><br><br><br><br></div>
      <div class="col-6 t">oooooo <br><br><br><br><br></div>
      <div class="col-6 t">oooooo <br><br><br><br><br></div>
      <div class="col-6 t">oooooo <br><br><br><br><br></div>
    </div>
  </div>
</div>

6
  • Hola Dario si puedes poner una imagen de la idea que tienes en mente te podria ayudar, pq con la descripcion no lo tengo muy claro es algo asi como 2 secciones una de 8 otra de 4 y luego los personajes ocupando la seccion de 4 de dos en dos.. saludos
    – RazerJs
    el 20 oct. 2019 a las 22:24
  • al parecer estas usando bootstrap por lo que entiendo y ya ejecute tu codigo y a mi con bootstrap me funciona bien, la idea esta perfecta pero arriba mencionas en el titulo de la pregunta que quieres usar grid (por esto entiendo que quieres usar css grid) y de ser el caso no tienes que agregar ninguna clase a tus etiquetas html sino mas bien agregar las propiedades correspondientes a css, se un poco mas explicito con tu pregunta si puedes por favor para poder ayudarte.
    – ASASCED
    el 20 oct. 2019 a las 22:32
  • @IsraelGonzález Gracias, si esa es la idea, agregué una imagen de como va quedando, la parte azul son los elementos que deben ir quedando de dos en dos. el 20 oct. 2019 a las 22:42
  • @DarioPerez ya entiendo modifico mi respuesta
    – RazerJs
    el 20 oct. 2019 a las 22:42
  • @IsraelGonzález y en caso de que sean muchos personajes y no quiero que esta columna de personajes sea más alta que la del mapa, por lo que pienso agregarle scroll ...¿Cómo se ajustaría el heigth de la sección personajes no a su contenido sino al tamaño de la del mapa ? el 20 oct. 2019 a las 22:49

1 respuesta 1

1

Me parece que esto es lo que quieres hacer... para tomar la mitad de tu espacio restante que has definido como (4 columnas) haces dos col-2 luego para que cada <div> con la clase t ocupe la mitad mitad del espacio restante disponible; dentro de este nuevo <div class="col-2"> haces una nueva row (<div class="row">) y dentro de esta pones cada <div class=col-6> asi los mostrara de 2 en 2 en cualquier tamaño de pantalla... Si esta nueva columna tiene muchos elementos y cambia el tamaño de tu div container puedes hacer una nueva clase con un height fijo y overflow:auto grids documentacion

.mapa {
    background-color: antiquewhite;
    margin: 0%;
    padding: 0%;
  }
  
  .personajes {
    background-color: burlywood;
    margin: 0%;
    padding: 0%;
  }
  
  /*buscas el tamanno que quieres en dependecia del fondo*/
   .muchos-personajes{
    height: 150px;/*cambias el tamanno este*/
    overflow: auto;
  }
  
  .t {
    background-color: cadetblue;
    margin: 0%;
    padding: 0%;
    border:solid;
  }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">


<div class="container-fluid">
        <div class="row">
            <div class="col-8 mapa">col-8 <br><br><br><br><br></div>
            <div class="col-2 muchos-personajes"><!-- col-2 para que ocupe la mitad de esa columna de 4 -->
                <div class="row"><!-- hacer un nuevo row -->
                    <div class="col-6 t">personaje1 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje2 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje3 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje4 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje1 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje2 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje3 <br><br><br><br><br></div>
                    <div class="col-6 t">personaje4 <br><br><br><br><br></div>
                </div>

            </div>
            <div class="col-2 personajes"> col-2 <!-- ahora col 2 --> 
            </div>
        </div>
    </div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.