html - 如何正确定位 3 个圆形图像
问题描述
我正在开发一个显示用户信息的盒子。在这种情况下，我需要添加三个平行的圆形图像，以便为用户提供更多选择。
我在片段末尾添加了一个示例图像，说明我希望如何显示我的三个圆形图像。
下面我添加了一个示例片段，其中包含我迄今为止开发的内容。
.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>我想用活动声明下方的 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>推荐阅读
- java - 使用正则表达式在部分内的组件中搜索数字
- rotation - 在画布中多次旋转单行
- windows - rm --cached 后无法阻止 git 修改文件
- qt - Clion 不会索引自动生成的 ui 头文件
- node.js - 如何在 Firebase 中获取 service-account.json 以获取 signedURL？
- python - 未定义 Django 项目全局名称“用户”
- azure - 我可以使用 Graph API 和 ADAL 库将 Azure 工作场所加入设备状态更改为合规性吗
- .htaccess - .htaccess：将特定链接重定向到另一个？
- scala - 在 spark scala 中保存 Xgboost 模型的问题
- cluster-analysis - 3个时间序列之间的聚类矩阵距离