チャイルドフィルの親を無応答で作成する

Question

フレックススライダーの応答性を損なうことなく、キャプションボックスを自分のイメージと同じサイズにしようとしていますか？

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

マッズK

Answer 1

私はそれインラインブロック作り、絶対配置を使用してそれを修正。これにより、もうそれ以上浮動させる必要はありません。加えて、私はボーダーボックスのものを追加したので、あなたのパディングはボックスを大きくしすぎませんでした。 display:inline-block;とborder-boxを組み合わせることで、レスポンシブデザインでの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; } 

ここでボーダー・ボックスのちょっといいチュートリアルがあります：http://css-tricks.com/box-sizing/