Question

我有两个问题：

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上创建悬停效果。

enter image description here

以下是我的代码：

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

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

1 个答案: