レスポンシブサイトの画像の下に常にテキストを貼り付けます

Question

小さな画像を表示するときに、画像の下に正確に表示する必要がある小さなdivがあります。私のサイト全体はすでにBootstrap-3になっていますが、現在の私の現在のコードでは、小さなデバイスで見たときにDATAの半分の部分がイメージに表示されます。

2つの問題： 1 - div（データ）を作成する方法は、応答可能なイメージの応答幅が常にありますか？ 2 - 画像の下部にあるdiv（データ）が常に異なるデバイスの寸法になるようにするにはどうすればよいですか？

私はtop:400pxをいじりましたが、私は右のそれを得ることができない、とwidthが実際に常にすなわち、画像の幅が100％でなければなりませんが、それでも私のdiv要素があまりにも多く飛び出し...

.image { 
 
    max-width: 100%; 
 
    max-height: 100%; 
 
    margin: 0; 
 
    display: block; 
 
    padding: 0px; 
 
} 
 

 
.data { 
 
    font-size: 11px; 
 
    font-family: 'Source Sans Pro',sans-serif; 
 
    font-style: normal; 
 
    color: #FFF; 
 
    font-weight: 700; 
 
    background-color: #000; 
 
    opacity: 0.7; 
 
    padding: 0 10px 0 10px; 
 
    border-bottom: 0px solid #FFF; 
 
    z-index: 3; 
 
    display: block; 
 
    position: absolute; 
 
    opacity: 0.7; 
 
    top: 400px; 
 
    left: 0; 
 
    min-width: 100%; 
 
}

<div class="block"> 
 
    <div class="item"> 
 
     <div class="image"><img alt="" src="http://lorempixel.com/400/400" /></div> 
 

 
     <div class="tag"> 
 
     <a href="#">TAG</a> 
 
     </div> 
 

 
     <div class="title"> 
 
     <a href="#">title</a> 
 
     </div> 
 

 
     <div class="data"> 
 
     <div class="date"> 
 
      01012001 
 

 
      <div class="author"> 
 
      Author 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div>

Answer 1

私は右のuを理解してほしい...そう、あなたの問題は次のとおりです。

1. 本部の.dataセクションは常に100％でなければなりません画像上の幅？
2. Div。データは常にイメートの下にある必要がありますか？

は、だからそれを確認してください。

.image { 
 
    position: relative; 
 
    display: inline-block; /* This can be inline too */ 
 
    margin: 0 auto; 
 
    padding: 0px; 
 
} 
 

 
.image .data { 
 
    padding: 0 10px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    
 
    background-color: rgba(0, 0, 0, 0.7); 
 
    
 
    font-size: 11px; 
 
    font-family: 'Source Sans Pro',sans-serif; 
 
    font-style: normal; 
 
    font-weight: 700; 
 
    color: #FFF; 
 
}

<div class="block"> 
 
    <div class="item"> 
 
     <div class="image"> 
 
     
 
     <img alt="" src="http://lorempixel.com/400/400" /> 
 
     
 
     <div class="data"> 
 
      <div class="date"> 
 
      01012001 
 

 
      <div class="author"> 
 
       Author 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 
     <div class="tag"> 
 
     <a href="#">TAG</a> 
 
     </div> 
 

 
     <div class="title"> 
 
     <a href="#">title</a> 
 
     </div> 
 

 
    </div> 
 
    </div>

一部は、グループのCSSスタイルにしてみてくださいadvices-。より良いセレクタを使用してください。すべてのHTML 5タグを使用するようにしてください。たとえば、画像をFigureタグで囲み、.data要素をfigurecaptionだけにすることができます。

幸運を祈る！