我有两个问题:
Q1。我需要在底部显示 DIV 的内容并尝试了 vertical-align:bottom;
和 align-items: flex-end;
但它们都不起作用。在下面的屏幕截图中,我已经显示了我想要显示图像的位置。实际上,我试图在水平分隔线附近显示图像。下面的部分毫不费力地工作,因为它已经出现在顶部:)
Q2。我的内容在上下两部分中垂直分组,例如:
- Group1:1-Flag-AddIcone
- Group2:2-Flag-AddIcon
- Group3:3-Flag-AddIcon
- Group4:4-AddIcon-Tick
- Group5:5-AddIcon-Tick
- Group6:6-AddIcon-Tick
我想使用 CSS 创建悬停效果,以便当鼠标经过组的任何部分时,整个组都会突出显示。问题是,数字不在同一个 div 中。我本可以将它们放在同一个 div 中,但我提出这个问题是因为在我的应用程序的其他部分也需要在其他 DIV 上创建悬停效果。
以下是我的代码:
<style type="text/css">
#line01Div{
height:20px;
}
#line02Div{
height:90px;
}
#line03Div{
border-top:3px solid #878C87;
}
#line04Div{
display:inline-block;
height:60px;
}
#line05Div{
height:30px;
}
.rnDiv{
display:inline-block;
text-align:center;
width:40px;
height:20px;
}
.ImageDiv1{
border:1px solid;
height:87px;
width:40px;
display:inline-block;
#vertical-align:bottom;
align-items: flex-end;
}
.ImageDiv1:hover{
cursor:pointer;
}
.ImageDiv2{
height:149px;
width:40px;
text-align:center;
display:inline-block;
vertical-align:top;
}
.imgSize{
max-width:85%;
max-height:85%;
}
</style>
<div id="line01Div">
<div class="rnDiv">1</div><!--
--><div class="rnDiv">2</div><!--
--><div class="rnDiv">3</div>
</div>
<div id="line02Div">
<div class="ImageDiv1"><img class="imgSize" src="Flagredicon.png" alt="" /><img class="imgSize" src="save_data.png" alt="" /></div><!--
--><div class="ImageDiv1"><img class="imgSize" src="Flagredicon.png" alt="" /><img class="imgSize" src="save_data.png" alt="" /></div><!--
--><div class="ImageDiv1"><img class="imgSize" src="Flagredicon.png" alt="" /><img class="imgSize" src="save_data.png" alt="" /></div>
</div>
<div id="line03Div">
</div>
<div id="line04Div">
<div class="ImageDiv2"><img class="imgSize" src="save_data.png" alt="" /><img class="imgSize" src="tick.png" alt="" /></div><!--
--><div class="ImageDiv2"><img class="imgSize" src="save_data.png" alt="" /><img class="imgSize" src="tick.png" alt="" /></div><!--
--><div class="ImageDiv2"><img class="imgSize" src="save_data.png" alt="" /><img class="imgSize" src="tick.png" alt="" /></div>
</div>
<div id="line05Div">
<div class="rnDiv ">4</div><!--
--><div class="rnDiv ">5</div><!--
--><div class="rnDiv ">6</div>
</div>
最佳答案
您可以通过使用 span
标签对您的 img
对进行分组,然后使用 absolute
position
跨越到底部
。
示例 http://jsfiddle.net/05yd0mjf/
CSS
.ImageDiv1 span{
position: absolute;
bottom:0;
}
HTML
<div class="ImageDiv1">
<span>
<img class="imgSize" src="Flagredicon.png" alt="" />
<img class="imgSize" src="save_data.png" alt="" />
</span>
</div>
关于html - 在底部显示多个内联div的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25898381/