CSS - Impedir que se desborde un div

 
Vista:
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por Francisco Daniel (20 intervenciones) el 14/05/2021 22:57:32
Hola a todos. Como hago para que el contenido de un div no se salga de su contenedor. Adjunto la imagen de como sale ahora. Lo que quiero hacer es que cuando no entren en el ancho del contenedor, lo ubique abajo.

Como podria hacer esto

Gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por joel (252 intervenciones) el 15/05/2021 08:30:19
No muestras nada de código, por lo que se muy bien si te puede funcionar... Prueba a poner los elementos flotantes (float:left) en principio cuando no caben bajan debajo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por Francisco Daniel (20 intervenciones) el 15/05/2021 17:32:39
Gracias por responder. Sigue igual. Te paso el codigo del css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.card{
 
   width: 100%;
 
    margin: 10px 30px;
 
    border: solid;
    border-color:rgb(53, 197, 183);
    background-color: rgba(13, 39, 54, 0.897);
    box-shadow: 5px 5px 10px 5px rgb(27, 27, 27);
 
}
 
.subcard{
    display: flex;
    justify-content: center;
    align-items: center;
    float:  left;
    padding: 10px;
 
}

y este es el html:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="sticky-top">
    <div>
    <h3 class="titu_card">Piezas y Trabajos Seleccionados</h3>
        <div class ="card " id="card">
 
 
            <div class="subcard" id="subcard">
 
            </div>
 
        </div>
    </div>
</div>

El div subcard se va llenando con los datos seleccionados por el usuario. Esto lo hago con javascript

Gracias
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por joel (252 intervenciones) el 16/05/2021 09:41:33
El display:flex con el float:left no tiene mucho sentido... prueba a quitar el display, el justify-content y el align-items
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por Francisco Daniel (20 intervenciones) el 16/05/2021 16:30:28
Al sacarle el display: flex me agrega los elementos uno abajo del otro. Yo necesito que se coloquen en la misma linea. Al dejar solo el display: flex sigue desbordandose el contenido. No se que mas puedo probar
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por joel (252 intervenciones) el 17/05/2021 10:38:21
Como lo has puesto Francisco?

Con el float:left, los elementos estan flotando, y si tienen anchura, se ponen uno al lado del otro
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 16
Ha disminuido 1 puesto en CSS (en relación al último mes)
Gráfica de CSS

Impedir que se desborde un div

Publicado por Francisco Daniel (20 intervenciones) el 17/05/2021 16:35:59
Hola, ahora ya funciona, tenia mal puesto el float: left. Muchas Gracias a todos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar