如何正确定位 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>
我正在开发一个显示用户信息的框。在这种情况下，我需要添加三个平行的圆形图像来给用户更多的选择。
我在代码片段的末尾添加了一个示例图像，说明我希望如何显示我的三个圆形图像。
下面我添加了一个示例片段，其中包含我目前开发的内容。
.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>