イメージの幅は75%、幅は25%のp-boxですが、親コンテナには収まりません!75%+ 25%が100%にならない...明らかに! CSSの問題
答えて
を私はこれを少し調整してみてくださいと思います:
.flexslider .slides img {
float: left; /* leave other properties */
}
.flex-caption {
width: 16%; /* leave others - width is 16% because you have a 2% padding around all sides (16 width + 2 left + 2 right */)
}
私はちょうど短いWUHUを作るよ! http://jsfiddle.net/bmBnF/6/は浮動小数点で動作するようです:左に20%の幅を残してください:) –
問題は、CSS width
で、実際に "コンテンツの幅" を意味します。パディングとボーダーはカウントされません。そのため、補間するために幅を調整(縮小)する必要があります。
updated jsfiddleを参照してください。 20%
の幅を16%
(両側の2%
の余白を補正)に変更し、丸めの問題を考慮して80%
を79%
に変更しました。
注:新しいブラウザでは、特定の要素に「従来型」(Microsoft)ボックスモデルを使用することができます。width
は、パディングと枠線を含む全幅を意味します。例についてはCthulhuの答えを参照してください。
しかし、どこに余白や余白がありませんか?そして、それをなくすためにCSSをリセットしても使えます:) –
'.flex-caption'に' padding:2% 'があります。 – bfavaretto
はJSFiddle上で何も見ることができません:-( – the0ther
ジャストキャプションを.flexする-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;
を追加します。
http://jsfiddle.net/Cthulhu/bmBnF/2/
これは、ボックスモデルのバグである、あなたがウィキペディア上でそれについて読むことができます:http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug
それでもトリックをしないでください...キャプションボックスはまだ画像の下に浮かんでいます:) –
私はあなたが何を意味するか分かりません。自分のjsfiddleのアップデートを提供しました。これは私があなたに与えた解決策でうまくいきます。詳細を送ることができますか? – Cthulhu
- 1. 体高が100%にならない - 財団のクライアントの問題?
- 2. 明らかなデッドロックc3p0の問題
- 3. CSSの問題、ミスアライメント、100%が100%ではありませんか?
- 4. 数式に何が問題なのかわからない
- 5. CSSのドロップダウンメニューの幅の問題と透明なレイヤの問題
- 6. 問題ながら
- 7. ブートストラップ透明パネルCSSの背景:rgbaが透明にならない
- 8. MPI:1つのMPIプロセスでプロセッサーが100%にならない
- 9. CSSの高さ100%の問題
- 10. CSSビューポートの問題:vh vs. 100%
- 11. 非常にシンプルなCSSの最小の高さマージンで100%の問題
- 12. unity3Dのアクセス修飾子が問題にならない
- 13. CSSがワードプレスで問題になる
- 14. IndexArrayOutOfBoundsException問題。エラーがどこにあるかわからない
- 15. Javaネットワーキング、マルチスレッドサーバで何が問題なのかわからない
- 16. JavaScript、HTML、CSSで並べ替えられていない問題
- 17. 透明な背景に透明な画像が付いている問題
- 18. ブラウザのサイズによらずCSSなしで100%幅
- 19. ChromeのFlexboxコンテナの高さが100%にならない
- 20. Css:フッターが底にならない?
- 21. jqueryの:私はこれで明らかに何か問題があると思いCSSやスタイル
- 22. スライドショーCSSで何が問題になっていますか?
- 23. なぜ100%幅がCSS箱のモデルで100%でないのですか?
- 24. CSSの高さが100%ではない
- 25. 事業部が位置づけられていない - CSSの問題
- 26. シンプルなCSSエラー - 問題を見つけられますか?
- 27. 不明な上位のディレクトリからCSSスタイルシートに変換する
- 28. JSのメニューがばらばらになる問題
- 29. Webpackが正常に動作しない(2.1.0-beta.25からv2.2.0へ)
- 30. CSSの問題:100%幅と1pxの境界線がFFブラウザではなくChromeでない理由
ボックスモデル - http://www.w3.org/TR/CSS2/box.html – xandercoded
http://paulirish.com/2012/box-sizing-border-box-ftw/ – brezanac