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

Question

我有两个问题:

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

Q2。我的内容在上下两部分中垂直分组，例如:

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跨越到底部。

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