1

Estoy en el desarrollo de un box en el cual muestro la información del usuario en este caso requiero agregar tres imágenes circulares paralelas para darle mas opciones al usuario.

He agregado una imagen de ejemplo al final de snippet de como quisiera que se visualizaran mis tres imágenes circulares.

A continuación he agregado un snippet de ejemplo con lo que llevo desarrollado hasta el momento.

.box.box-success {
    border-top-color: #00a65a;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.actividades {
    padding-right: 80px;
    text-align: right;
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
    font-weight: bold;
}

.profile-user-img {
    padding: 3px;
    border: 3px solid #d2d6de;
}

.img-circle {
    border-radius: 50%;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
}

.datosGenerales {
    font-family: 'Gill Sans', 'Gill Sans MT';
    text-align: center;
    color: #5D6168;
    font-weight: bold;
}

h2 {
    font-size: 20px;
}

.puesto {
    font-size: 14px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="box box-success">
                
                <div class="box-body">

                    <div class="actividades">Actividades</div>
                    <div class="box-body box-profile">
                        <img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"> 
                        <div class="col-xs-7 col-lg-7 text">
                                <div style="display:inline-block; text-align: left;" >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4">Espacio</div>
                                <br>
                                <div style="display:inline-block; " >
                                <h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
                                <br>
                                <div style="display:inline-block; " >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
                            </div>  
                    </div>
                    <h2 class="datosGenerales">Nombre</h2>
                    <div class="puesto">Puesto</div>
                </div>
                <!-- /.box-body -->
            </div>

Las imágenes que deseo agregar con los pequeños 3 circulos que se encuentran debajo del enunciado de actividades

Imagen de ejemplo:

introducir la descripción de la imagen aquí

Actualización:

En base a una de las respuesta he hecho la modificación que se me indica en ella pero esta solo me ubica las tres imágenes circulares debajo de la principal, hay manera de que queden a un lado así como la imagen de ejemplo ?

2 respuestas 2

3

Yo resolvería esto con GRID. Añadí varios row, div y elimine alguna de tus clases que me bloqueaban algunas funciones.

Traté de imitar lo mas posible lo que esperas. Ahora sería cuestión de tomar este código de muestra y seguir puliéndolo.

Te muestro lo que pude hacer con tu código:

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <style>
        .box.box-success {
            border-top-color: #00a65a;
        }

        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #d2d6de;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
        }

        .actividades {
            padding-right: 80px;
            text-align: center;
            font-size: 18px;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: #5D6168;
            font-weight: bold;
        }

        .profile-user-img {
            padding: 3px;
            border: 3px solid #d2d6de;
        }

        .img-circle {
            border-radius: 50%;
        }

        .carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        img {
            vertical-align: middle;
        }

        .datosGenerales {
            font-family: 'Gill Sans', 'Gill Sans MT';
            text-align: center;
            color: #5D6168;
            font-weight: bold;
        }

        h2 {
            font-size: 20px;
        }

        .puesto {
            font-size: 14px;
            text-align: center;
            font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
            color: #5D6168;
        }
    </style>
    <body>
        <div class="box box-success">
            <div class="container">
                <div class="box-body">
                    <div class="row">
                        <div class="col-xs-5 col-lg-5 box-body box-profile">
                            <img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture">                        
                        </div>
                        <div class="col-xs-7 col-lg-7 text">
                            <div class="actividades">Actividades</div>

                            <div style="display:inline-block; text-align: left;" >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                            </div>
                            <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4">Espacio</div>
                            <br>
                            <div style="display:inline-block; " >
                                <h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                            </div>
                            <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
                            <br>
                            <div style="display:inline-block; " >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1>
                            </div>
                            <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Espacio</div>
                        </div>
                    </div>
                    <h2 class="datosGenerales">Nombre</h2>
                    <div class="puesto">Puesto</div>
                </div>  <!-- /.box-body -->
            </div>  <!-- /.container -->
        </div>  <!-- /.box-->
    </body>
</html>

Salida

introducir la descripción de la imagen aquí

Ojalá pueda ayudarte.

4
  • Gracias por tu posible respuesta, lo intente pero me quedaron las 3 imágenes circulares debajo de la principal, he actualizado la pregunta para su respectiva validación.
    – John Doe
    el 12 ago. 2021 a las 14:08
  • Estas añadiendo este cuadro a un menu (nav)? a que espacio de la pagina? Para que dispositivos? Porque dependiendo de esto se va a visualizar de una u otra forma. Puedes mostrar mas de tu codigo? por favor
    – Lilibeth
    el 12 ago. 2021 a las 14:24
  • Es todo el codigo que se necesita para mostrar las imagenes que requiero. si gustas puedes ejecutar el snippet que he agregado en mi pregunta principal y ver lo que he desarrollado hasta ahora, adicional a tu comentario se esta adaptando para dispositivo Desktop
    – John Doe
    el 12 ago. 2021 a las 14:56
  • @JohnDoe, has intentado reproducir el codigo fuera de stackoverflow? Creo que el sitio web esta bloqueando alguna de las funciones que he creado. Subi una imagen a mi edicion de como yo puedo visualizar el codigo escrito.
    – Lilibeth
    el 12 ago. 2021 a las 18:11
0

Despues de ir y venir me di cuenta que básicamente, debo agregar antes, profile-user-img pero hay muchas cosas que limpiar en mi código. No debo usar muchas etiquetas h1 (pero esto no afectaría mi problema) Además, si no uso style = "display: inline-block", tampoco es necesario <br>

.box.box-success {
    border-top-color: #00a65a;
}

.box {
    position: relative;
    border-radius: 3px;
    background: #ffffff;
    border-top: 3px solid #d2d6de;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 1px rgb(0 0 0 / 10%);
}

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.actividades {
    padding-right: 80px;
    text-align: right;
    font-size: 18px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
    font-weight: bold;
}

.profile-user-img {
    padding: 3px;
    border: 3px solid #d2d6de;
}

.img-circle {
    border-radius: 50%;
}

.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
    display: block;
    max-width: 100%;
    height: auto;
}

img {
    vertical-align: middle;
}

.datosGenerales {
    font-family: 'Gill Sans', 'Gill Sans MT';
    text-align: center;
    color: #5D6168;
    font-weight: bold;
}

h2 {
    font-size: 20px;
}

.puesto {
    font-size: 14px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    color: #5D6168;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="box box-success">
                
                <div class="box-body">

                    <div class="actividades">Activity</div>
                    <div class="row box-body box-profile">
                        <div class="col-xs-5 col-lg-5"><img class="profile-user-img img-responsive img-circle" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></div>
                        <div class="col-xs-7 col-lg-7 text">
                                <div style="display:inline-block; text-align: left;" >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4">Blank</div>
                                <br>
                                <div style="display:inline-block; " >
                                <h1><img class="profile-user-img img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Blank</div>
                                <br>
                                <div style="display:inline-block; " >
                                <h1><img class="profile-user-img  img-circle" style="width: 60px;" src="https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg" alt="User profile picture"></h1></div>
                                <div style="display:inline-block;font-size:18px;color: blue;"class="pb-4"> Blank</div>
                            </div>  
                    </div>
                    <h2 class="datosGenerales">Name</h2>
                    <div class="puesto">Description</div>
                </div>
                <!-- /.box-body -->
            </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.