DreamWeaver8を使って、ホームページを作る練習をしているの
ですが、たくさんの商品を並べるページで

商品写真を<div>タグでくくり
フロートを使って一列に3つの商品が横並びになり
一ページに合計9つの商品を紹介するような段組を作ろうとしました。

#main div.goods {
float: left;
width: 160px;
margin-right: 20px;
margin-bottom: 20px;
}

というようなスタイルをDreamWeaver8を使って目的の<div>タグに
適応させてみたのですがレイアウトが崩れてしまいました。

一列目は綺麗に「商品写真」が3つ並べることができたのですが
二列目の最初に表示される「商品写真」が画面の右側によってしまい
写真が3つ並ぶはずが、2列目には一つしか表示されず
それ以降のレイアウトが崩れてしまいました。

<div>タグとフロートを使って、レイアウトを崩さないように
うまく商品を並べるにはどうすればいいのでしょうか?


回答宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

1行目2つ目の高さが一番高く、引っかかっている状態だと思われます。


状況が許せば、一番背の高い商品を一番右に並べるようにすると、改善されるでしょう。

状況が許さなければ、一番左にくる商品にクラス名をつけて、そのクラスに、clear:left;を指定してください。
    • good
    • 0
この回答へのお礼

なんとか問題解決することができました。本当にありがとうございました^^

お礼日時:2011/10/10 22:02

私も初心者の為、まったく自信が無いのですが、私も同じような1面に画像を整列させる様な仕様を作成した際に中央部分に縦長に表示された事がありました。

その際実施したのが、『クリア』でした。
CSS『ボックス』→『クリア』→『両方』を選択し解決した記憶があります。がせネタかもしれませんが1度試してみてください。
    • good
    • 0
この回答へのお礼

おかげさまで無事に解決することができました。回答ありがとうございました^^

お礼日時:2011/10/10 22:01

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング

おすすめ情報