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

Question

我有两个问题：

第一季度。我需要在底部显示 DIV 的内容并尝试过 vertical-align:bottom; 和 align-items: flex-end; 但它们都不起作用。在下面的屏幕截图中，我显示了我想要显示图像的位置。实际上，我正在尝试在水平分隔线附近显示图像。下部工作毫不费力，因为它已经出现在顶部:)

第二季度。我的内容是上下垂直分组的，比如：

1. Group1：1-Flag-AddIcone
2. Group2：2-Flag-AddIcon
3. Group3：3-Flag-AddIcon
4. Group4：4-AddIcon-Tick
5. Group5：5-AddIcon-Tick
6. Group6：6-Ad​​dIcon-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>

Answer 1

您可以通过使用span 标记将img 对分组，然后将absolute position 跨度分组到bottom。

例如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>