css - 応答しなくなることなく、子を親で満たす

Question

フレックススライダーの応答性を失うことなく、キャプションボックスを画像と同じサイズにしようとしています。何か提案はありますか？

http://jsfiddle.net/bmBnF/10/

マッドK

Answer 1

インラインブロックにし、絶対測位を使用して修正しました。これにより、もう正しくフロートする必要がなくなります。さらに、ボーダーボックスのものを追加したので、パディングによってボックスが大きくなりすぎないようにします。display:inline-block;とボーダーボックスを一緒に使用すると、レスポンシブデザインでCSSの配置がはるかに簡単になります。

  .flex-caption {position:absolute;display:inline-block;min-height:100%;width: 26%; padding: 2%; margin: 0; background: rgba(0,0,0,.3); color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.3); font-size: 14px; line-height: 18px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; }

ここにborder-boxに関するちょっとしたチュートリアルがあります：http：//css-tricks.com/box-sizing/