Html 在底部显示多个内联div的内容

我有两个问题：

问题1。我需要在底部显示DIV的内容，并尝试了垂直对齐：bottom；并对齐项目：柔性端；但它们都不起作用。在下面的屏幕截图中，我已经显示了要显示图像的位置。实际上，我正试图在水平分隔线附近显示图像。下面的部分没有任何工作，因为它已经出现在顶部：

问题2。我的内容垂直分为上下两部分，例如：

组1:1-Flag-AddIcone 第2组：2-Flag-AddIcon 第3组：3-Flag-AddIcon 第4组：4-AddIcon-Tick 第5组：5-AddIcon-Tick 第6组：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对进行分组，然后将span绝对定位到底部来完成此操作

范例

CSS

HTML

---

当你说你想突出整个群体时，什么构成了一个群体？像这样不，数字和两个图像组成一个组。这样地。我只是想解释一下，我已经在images Div中显示了数字，但我的要求是将数字保留在单独的Div中，但创建一个与其他Div不同的悬停效果。这仅在CSS中是不可能的。不过，在jQuery中这样做很容易。

.ImageDiv1 span{
    position: absolute;
    bottom:0;
}

<div class="ImageDiv1">
    <span>
    <img class="imgSize" src="Flagredicon.png" alt="" />
    <img class="imgSize" src="save_data.png" alt="" />
    </span>
</div>