我有两个div元素,都有CSS属性display: inline-flex,因为我想将它们放在彼此旁边.起初,div似乎正确定位.
.userImg{
height: 3em;
width: 3em;
background: red;
display: inline-flex;
}
.nameOfUser{
display: inline-flex;
height: 3em;
width: 10em;
background: blue;
}<div class = "userImg"></div>
<div class = "nameOfUser"></div>但是,一旦我在其中放置了一些文本nameOfUser div,它似乎会创建一些奇怪的上边距,这使得两个div元素彼此不对齐.
.userImg{
height: 3em;
width: 3em;
background: red;
display: inline-flex;
}
.nameOfUser{
display: inline-flex;
height: 3em;
width: 10em;
background: blue;
}<div class = "userImg"></div>
<div class = "nameOfUser">
<h3>Jaxon Crosmas</h3>
</div>有人可以解释为什么会发生这种情况并提供可能的解决方案吗？
我有多个div框,这个类printPic将有自己唯一的ID.在悬停时/外出时,切换显示printPicOverlay为其的子项printPic.我现在设置它的方式,printPicOverlay所有id都在悬停时切换.
printPicOverlay对于每个个人ID,在悬停时显示/隐藏的最佳方式是什么？
$(".printPic").hover(function () {
$(".printPicOverlay").toggle();
}, function () {
$(".printPicOverlay").toggle();
});.printPic{
height: 10em;
width: 10em;
display: inline-block;
background: red;
position: relative;
}
.printPicOverlay{
height: 100%;
width: 100%;
background: rgba(0,0,0,0.4);
display: none;
position: absolute;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "printPic" id = "1">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "2">
<div class = "printPicOverlay"></div>
</div>
<div class = "printPic" id = "3">
<div class …