###前提・実現したいこと
bootstrapを使って、サイト作成にチャレンジしています。
下記のソースのように、高さの違う画像を用いてイメージギャラリーの様なものを作りたいのですが、画像の開始位置を均一にしようと、
https://beginningzero.blogspot.jp/2017/03/bootstrap_13.html
こちらのページを参考にcssを追記したのですが、firefoxとsafariでは表示が異なります。
いろいろ調べたのですが、どうしてスペースが空くのかがわかりません。
また、解決法等ございましたら、ご教示くださいますでしょうか。
###発生している問題・エラーメッセージ
safariだと、1行目の右端の画像がズレ落ちる(親boxに幅指定はしていない)
###該当のソースコード
<html lang="jp"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap.min.css"> <style> section{padding:200px 0;} img{width:90%;} .mb{margin-bottom:30px;} .row-eq-height { display: -webkit-flex; /* Safari */ display: flex; flex-wrap: wrap; } </style> </head> <body> <section> <div class="container"> <div class="row row-eq-height"> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#f00; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#FF6; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#3F3; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#3F3; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#f00; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト ダミーテキストダミーテキスト</p> </div> <div class="col-sm-3 col-xs-6 mb"> <p style="background:#eee; padding:20px;">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p> </div> </div> </div> </section> </body> </html>
###試したこと
課題に対してアプローチしたことを記載してください
###補足情報(言語/FW/ツール等のバージョンなど)
bootstrap3を使っています
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/23 00:04
2017/10/23 00:12