하단에 여러 개의 인라인 div 콘텐츠 표시

Question

나는 두 가지 질문이 있습니다.

Q1. 아래쪽에 DIV의 내용을 표시하고 vertical-align:bottom; 및 align-items: flex-end;을 시도했지만 그 중 아무 것도 작동하지 않습니다. 아래의 스크린 샷에서 이미지를 표시 할 위치를 표시했습니다. 사실, 나는 수평 분배기 가까이에 이미지를 표시하려고합니다. 하단 섹션은 이미 위에 나타나기 때문에 아무런 노력없이 작동했습니다.

Q2.

1. 그룹 1 : 1-FLAG-AddIcone
2. 그룹 2 2-FLAG-AddIcon
3. 그룹 3을 내 콘텐츠는 수직과 같은 상부 및 하부 섹션으로 그룹화된다 -3- 신고-AddIcon
4. 그룹 4 : 4 AddIcon - 틱
5. Group5 : 5 -AddIcon - 틱
6. Group6 : 6 AddIcon - 틱

나는 마우스가 그룹의 모든 섹션을 통해 갈 때, 전체 그룹이 강조 될 수 있도록 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

당신은 그룹에 img쌍을 span 태그를 사용하여이 작업을 수행하고 bottom에 다음 absoluteposition 스팬 수에 따라

내 코드입니다.

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