- ベストアンサー
こんな表示はできそうですか?縦詰め→横回り込み
- 縦詰め→横回り込みの表示方法について質問です。
- 横600 × 縦700の枠内に、横200 × 縦可変のボックスを敷き詰めたいです。
- 敷き詰め方は縦方向に行い、700を超えると右へずれて新たな行に配置したいです。
- みんなの回答 (1)
- 専門家の回答
質問者が選んだベストアンサー
関連するQ&A
- [CSS]Firefox2では横表示・IE6では縦表示
CSSについて質問させてください。 contentsというDIVの中に、con-leftというDIVとcon-rightというDIVを横に並べて表示したい場合に、以下のタグを書きました。 [CSS] #contents { width:910px; padding:20px; } #contents #con-left , #contents #con-right { width:453px; float:left; border:solid 1px red; } [HTML] <div id="contents"> <div id="con-left"></div> <div id="con-right"></div> </div> 理論上では、con-left及びcon-rightの横幅は453px+ボーダーの2pxで、合計455px、それが二つで910pxで、横に表示されるはず。 しかしIEでは縦に並んで表示されてしまいます。 この解釈の違いがよく分かりません…。 分かる方は教えていただけませんか?
- ベストアンサー
- HTML
- ボックス(div)の縦方向中央をそろえる
<div id="wrap"> <div id="a">~</div> <div id="b">~</div> </div> #a { float: left; } #b { float: right; } a, b を wrap で包み、a, b を float で左右に並べています。 この a と b のボックスの高さが違うとき、これらを縦方向センターでそろえるにはどうしたらよいでしょう?
- ベストアンサー
- HTML
- inlineでテキストの入ったボックスを横に並べる
いつもお世話になっています。 inlineでテキストが中に入った高さの違うボックスを横に並べる方法に ついてです。float1~6が題名で、あいうえお等がその下に説明文として 並ぶと思ってください。 確認ブラウザ 【OK】Win ie6、ie7、Fx3.5.2、Opera、Mac Safari 【NG】Mac Fx2.0 添付画像のように<dt>と<dd>が横に並んでしまい、<dt>の下に来てくれ ません。<dt><dd>どちらをclearしてもだめでした…。 宜しくお願いします!! <style> div.wrap { width: 600px; background: #EEEEEE; padding: 8px; border: 1px solid #333333; } div.box { display: -moz-inline-box; display: inline-block; /display: inline; /zoom: 1; width: 160px; height: 130px; margin: 8px; border: 2px solid #333333; background: #DDDDDD; vertical-align: top; padding: 8px; } div.height { height: 200px; border: 2px solid #FF9999; background: #FFEEEE; } dd{ width: 150px; float: left; } dt { float: left; clear: left; } </style> <html> <body> <div class="wrap"> <div class="box"> <dt>float 1</dt> <dd>ああああああああああああああああああああああああああああああああああああ</dd> </div><!-- --><div class="box height"> <dt>float 2</dt> <dd>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</dd></div><!-- --><div class="box"> <dt>float 3</dt> <dd>うううううううううううううううううううううううううううううううううううう</dd> </div><!-- --><div class="box"> <dt>float 4</dt> <dd>ええええええええええええええええええええええええええええええええええええ</dd></div><!-- --><div class="box"> <dt>float 5</dt> <dd>おおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおおお</dd> </div><!-- --><div class="box"> <dt>float 6</dt> <dd>かかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかかか</dd></div> </div> </body> </html>
- ベストアンサー
- HTML
- floatを複数使用するとFirefoxでデザインが崩れる
CSSの質問です。 divタグを使い、div1を左にfloatさせ、div2を右にfloatさせています。そのdiv2内にまたdiv3とdiv4を配置し、div3を左にfloat、div4を右にfloatさせようとしたのですが、問題が起こりました。IEでは狙ったとおりに表示されるのですが、Firefoxではデザインが崩れてしまいます。先の例で言うと、div2がdiv1の下の行に来てしまうのです。 Firefoxでは、二重にfloatを使用することは出来ないのでしょうか?
- 締切済み
- HTML
- CSSのボックスが縦に並ばない・・・
質問させて下さい。 大きな四角の枠で囲まれたようなホームページを作っています。 下記のような感じなのですが ---------------------------------------------- <body> <div id="mainbox">(大きな外枠) あああああああ <div id="gazou"> ******** </div> </div> </body> ---------------------------------------------- この外枠の下に何行か空白を入れたいんです。 ※ホームページを縦にスクロールしたときに、外枠の底がブラウザの一番下とくっつく のが気に入らないので。 <div id="mainbox"></div>の下に適当なボックスを描いても、なんだか横にいったり 空白のマージンが調整できなかったりなんだかよくわかりません。最悪背景色の画像でも放り込めばよさそうな気もしますが・・・ 普通はこういうときはどうするのでしょうか?
- ベストアンサー
- CSS
- スタイルシートで、画像の横にリストを表示するには?
テーブルを使えば、1行2列のテーブルに左に画像、右にリストを入れれば、横並びができるかとおもいますが、スタイルシートを使った場合、画像の横にリストをおこうとすると、どうしても下に流れてしまいます。divで、画像とリストを囲って、floatをつかって右、左とすればできるかもしれないかなとおもいましたが、もっと簡単にできる方法がありそうなんですが。。。 なにとぞよろしくお願いいたします。
- ベストアンサー
- HTML
- CSS floatによるレイアウト
box_mを縦に並べて、box_mの中にbox_1(左)とbox_2(右)を作りました。 CSS .box_m { width: 410px; margin: 0px 0px 20px 0px; } .box_1 { float: left; width: 200px; height: 100px; } .box_2 { float: right; width: 200px; height: 100px; margin: 0px 0px 0px 10px; } HTML <div class="box_m"> <div class="box_1"> ボックス1 </div> <div class="box_2"> ボックス2 </div> </div> <div class="box_m"> <div class="box_1"> ボックス1 </div> <div class="box_2"> ボックス2 </div> </div> IEでは意図したとおりに表示されましたが、Firefoxではbox_mの下のmargin20pxが反映されず、box_m同士がくっついています。 box_m同士の間に20pxの空間を作るにはどうしたらいいですか?
- ベストアンサー
- CSS
- ブログ記事内でfloat要素が表示されない
ブログの記事内で文章を左右に分けて書きたくて <div class="box">左の文</div> <div class="box">右の文</div> CSS→ .box{width:300px;float:left;padding:0 5px;;} としたのですが、IEの古いバージョン(7。8もたぶん)では floatさせたdiv要素が表示されません。 (この箇所だけがまるまる記事から無くなります) 解消法の分かる方、どうかお教え願います。 ブログはアメブロを使っています。
- 締切済み
- CSS
- 楽天のバナーを縦帯から横縦帯にする方法
楽天のバナー<table border="0" cellpadding="0" cellspacing="0"><tr><td valign="top"><div style="border:1px solid;margin:0px;padding:6px 0px;width:120px;text-align:center;float:left"><a href="***%3f_ex%3d64x64" alt="【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料!CECIL..." border="0" style="margin:0px;padding:0px"></a><p style="font-size:12px;line-height:1.4em;text-align:left;margin:0px;padding:2px 6px"><a href="***" target="_blank">【SALE】MAX82%OFF!!税込10,500円以上ご購入で送料無料!CECIL...</a><br><span style="">価格:2,940円(税込、送料別)</span><br></p></div></td></tr></table> 縦帯から横縦帯にする方法を教えてください。どこの場所を変更すれば縦帯から横縦帯にできるのか誰か教えてください。 よろしくお願いします。
- 締切済み
- CSS
- divを横に並べる方法
<div id="aaa">aaaaaaaaaaaaaaaaa</div> <div>iiiiiiiiiiiiiiiiiiii</div> <div>uuuuuuuuuuuuuuuuu</div></td> この状態だとDivが縦に三つ並んでいるのですが、これを横に一列に並ばせたいのです。 使っているソフトはDreamweaver8でCSSを使い作成しています。 各Divタグのボックスの設定で試行錯誤していますが、全く解決しません。アドバイス宜しくお願いします。
- ベストアンサー
- CSS
お礼
ぃやったー!! ありがとうございます。ありがとうございます。 100回言っても足りません。 もう。もぅ 魔法です! サファリ最高~♪ 基、salonpath様が最高です。 とっても、想像通りでした。 最初、divごとずらす事を考えてたんですが、こっちの方が 完全な敷き詰めになるので、よさそうです。 (もし、divごとずらす事が簡易なら、ここよ~と教えて頂けると ありがたいです。) 本当にありがとうございます。 投稿してからWEBを放浪して、すっかりこんな時間です。。 しょうがなく、jsでheightを取って計算しようかなと思ってた所でした。
補足
色々、見てみてます! FireFoxですが、存在する画像だと、表示されるみたいでした。 -webkit-column-count -moz-column-count を初めて知りました。ありがとうございますっ あと、完全にheight:700pxで設定すると、右に大きくなったので、 外側にDIVつけて、オーバーフローで消しました♪ ~~ div .cl { width: 600px; height:600px; -moz-column-count: 3; -webkit-column-count: 3; } </style> </head> <body> <div style="overflow:hidden; height:600px; width:600px;"> <div class=cl> ~~ 頑張ります♪