如何正确定位 3 个圆形图像

How to correctly position the 3 circular images

我正在开发一个显示用户信息的框。在这种情况下,我需要添加三个平行的圆形图像来给用户更多的选择。

我在代码片段的末尾添加了一个示例图像,说明我希望如何显示我的三个圆形图像。

下面我添加了一个示例片段,其中包含我目前开发的内容。

.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="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">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>

我想用 activity 语句下方的 3 个小圆圈添加的图像

示例图片:

基本上你需要在profile-user-img之前添加 但是您的代码中有很多东西需要清理。并且不要使用很多 h1 标签(但这不会影响您的问题) 另外,如果你不使用 style="display:inline-block" 你不需要 <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>