お世話になっております。
制作中のWEBサイトについて質問です。
http://www.kimijimaya.co.jp/index.html
flexboxで横並びにしたバナー画像が、以下のキャプチャのように変形された状態で表示されてしまいます。
一度、画像ファイルをサーバーから削除してアップし直したり、
index.htmlそのものを削除>アップロードし直したりしたのですが、
何をやってもきれいに表示されません。
ご助言頂けると大変助かります。
何卒よろしくお願い申し上げます。
【記述したコード】
<div id="btn-panel"> <a href="http://shopping.kimijimaya.co.jp/smartphone/"> <img src="img/btn_onlineshop.jpg" alt="オンラインショップ"> </a> <a href="http://www.kimijimaya.co.jp/shop_profile.html"> <img src="img/btn_shopsguide.jpg" alt="店舗案内"></a> <img class="pc" src="img/btn_recruit.jpg" alt="採用情報"> <a href="http://www.kimijimaya.co.jp/sec_profile.html"> <img src="img/btn_restaurants_pro.jpg" alt="飲食店の方へ"></a> <a href="http://www.kimijimaya.co.jp/recrutement.html"> <img class="sp" src="img/btn_recruit.jpg" alt="採用情報"></a> <a href=""> <img src="img/btn_satoshi_kimijima.jpg" alt="弊社代表・君嶋哲至のページ"></a> <a href="download/yk_wine2017winter.pdf"> <img src="img/btn_wine_catalog.jpg" alt="自社輸入ワインカタログ"></a> </div>#btn-panel{
width: 1020px;
margin-bottom: 5%;
display: flex;
display: -webkit-flex;
align-items: flex-top;
margin:0 auto;
flex-wrap:wrap;
-webkit-flex-wrap: wrap;
}
#btn-panel img{
max-width: initial;
width: 250px;
margin-bottom: 5%;
margin-right: 5px;
}
回答2件
あなたの回答
tips
プレビュー