商品ページの幅の揃え方について

Question

お世話になります。

商品ページバナー画像やパソコンスペックの表が縦に揃っていないことに悩んでいます。

バナー等の幅を750pxに全て揃えようと思うのですがなにか良い方法(コツ)はありますか？

くじらやさんの商品ページのように縦をそろえるようにしたいです。

・くじらやさん商品ページ
https://item.rakuten.co.jp/pckujira/tt041001/

・当店の商品ページ
https://item.rakuten.co.jp/upc1114/10000185/
https://item.rakuten.co.jp/upc1114/10000069/
https://item.rakuten.co.jp/upc1114/10000203/


画像も添付しましたのでそれもご確認下さい。###HR######IMG0a4d21e8ef9f5b07e84c0198c85fa1ea1.jpegIMG0### ###IMG163baee2f8cf7340af0abce417b3ed689.jpegIMG1### ###IMG250bba7aa17b0b56ac372d1a2b63e43dc.jpegIMG2###

Answer

ECマスターズの伊藤です。

> 商品ページバナー画像やパソコンスペックの表が縦に揃っていないことに悩んでいます。
> 
> バナー等の幅を750pxに全て揃えようと思うのですがなにか良い方法(コツ)はありますか？

商品をかごに追加　の下に表示されている、製品仕様
（おそらくPC用商品説明文だと思います）の箇所で
表示しているtableの横幅が大きく、枠を広げてしまっているため
画像に適用頂いているwidth="100%"が
広がった枠いっぱいに、表示されているのが
原因となっています。

tableにもwidth="100%"が適用できますので
商品をかごに追加　の下に表示されている、製品仕様の横幅を
こちらに差し替えて頂ますよう、お願いいたします。

また、width="100%"だと上記で広がった枠いっぱいに、
要素が広がってしまいます。
そのため、width="750"とwidth="100%"が混在すると
縦が揃わなくなってしまいます。
要素の横幅を、統一していただくことで
解消していただくことができると思いますので、お試しくださいませ。