1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Ayuda ¿Como adaptar div? Como usar el Box-Sizing

Tema en 'HTML y CSS' comenzado por GtaSApawer, 7 de Enero de 2017.

  1. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Buenas, tengo un problema quiero adaptar los siguientes divs de manera que quepan 4 columnas. Le puse un margin determinado y ahora me aparecen 3 columnas. Lo que deseo es que los divs se ajusten manteniendo el margen. Intente la propiedad box-sizing: border-box y no me funciono.

    http://codepen.io/anon/pen/JEdwNW

    upload_2017-1-7_20-2-56.png
     
  2. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    331
    Me gusta recibidos:
    243
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Bueno yo nunca he utilizado
    Bootstrap para los posicionamiento de columnas de esa forma, además los col-xs-m3 vienen predefino su tamaño el cual en un width del 100% entra solamente 12 columnas y puede variar su tamaño del 100%.

    Sin embargo estas anexando un margin left o right a las col-xs-m3 el cual estas alterando el tamaño de cada column,
    la propiedad box-sizing se usa para decirle al navegador qué las propiedades de tamaño (anchura y altura) se deben incluir.
    border-box solamente incluye el content, el padding, border pero no el margin y padding- box solamente el padding y el content. El margin no funciona.

    Yo lo corregí utilizando la propiedad border left y right el cual aplico un 10px solid white... Mira el siguiente image:

    example5.jpg


    Aquí vario el contenedor padre con width de 80%

    example6.jpg

    El siguiente link FalcoMaster te puede explicar en los primero minutos del video.
    http://www.falconmasters.com/cursos/curso-bootstrap/

    Saludos :):cool:
     
    Última modificación: 8 de Enero de 2017
    A AngelKrak le gusta esto.
  3. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    Jugando un poco con el css, lo que hice fue calcular el ancho de cada div de esta manera.
    width: calc(25% - 15px);

    Intente tu solución, pero cuando le agrego texto al div este se rompe.
     
    A AngelKrak le gusta esto.
  4. Dawud

    Dawud Miembro Activo

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    331
    Me gusta recibidos:
    243
    Puntos de trofeos:
    43
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Podrías mostrar si tienes aun cuando se te rompe a la hora de incrustar el texto??

    Aquí dejo un ejemplo con texto en el cual aplique un height de 100px para cada caja, como lo podrás observar

    example7.jpg
     
    Última modificación: 7 de Enero de 2017
    A GtaSApawer y AngelKrak les gusta esto.
  5. GtaSApawer

    GtaSApawer Miembro

    Se incorporó:
    12 de Febrero de 2015
    Mensajes:
    235
    Me gusta recibidos:
    8
    Puntos de trofeos:
    18
    Género:
    Hombre
    No recuerdo que fue lo que puse. XD
     

Comparte esta página