如何实现灰色箭头转到红色位置?在按钮上方。
<div class="media">
<img class="rounded-circle profile-img" src="{{ user.userprofile.image.url }}">
<div class="one-above-the-other">
<div class="dropdown">
<a class="link-hover" data-toggle="dropdown">
<i class="fas fa-cog dark-icon"></i>
</a>
<div class="dropdown-menu my-drop-menu">
<span class="my-drop-menu-item-span">
<a class="my-drop-menu-item dropdown-item change-email link-hover"
data-id="{% url 'change-email' user.pk %}">
Change email
</a>
</span>
</div>
</div>
<div class="edit-profile-button">
<a class="edit-profile link-hover btn my-purple-btn">Edit profile</a>
</div>
</div>
</div>
Media
并且rounded-circle
来自引导程序。my-drop-menu
并且edit-profile-button
仅用于样式。
.one-above-the-other {
margin-left: auto;
margin-right: 0;
margin-top: auto;
margin-bottom: 0;
}
.profile-img {
width: 132px;
height: 132px;
}
更新了最新代码。
请尝试以下两种方法。希望这些作品之一能为您服务。
.one-above-another {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
width: 100%;
}
.one-above-another {
position: relative;
width: 100%;
}
.one-above-another .dropdown {
position: absolute;
top: 0;
right: 0;
}
检查此Jsfiddle链接。
.media {
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end !important;
}
/* .one-above-the-other {
margin-left: auto;
margin-right: 0;
margin-top: auto;
margin-bottom: 0;
} */
.circle-img {
display: inline-flex;
width: 100px;
height: 100px;
border-radius: 50%;
}
.dropdown-box {
position: absolute;
top: 0;
right: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="media">
<img class="circle-img" src="https://via.placeholder.com/300">
<div class="one-above-another">
<div class="dropdown-box">
<div class="dropdown">
<a class=" link-hover" data-toggle="dropdown">
<i class="fas fa-cog dark-icon"></i>
</a>
<div class="dropdown-menu my-drop-menu">
<span class="my-drop-menu-item-span">
<a class="my-drop-menu-item dropdown-item edit-post link-hover" data-id="">
Change email
</a>
</span>
</div>
</div>
</div>
<div class="edit-profile-button">
<a class="edit-profile link-hover btn my-purple-btn">Edit profile</a>
</div>
</div>
</div>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句