- ベストアンサー
【ＣＳＳ】floatで左右に並べた<div>を下揃えにできますか？
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、この２つのblockレベル要素は高さが違えば下部が不ぞろいになります。 これは仕方ないとして、上部が不揃いになってもいいので下揃えにできませんでしょうか？ text-align:bottom;やvertical-align:bottom;ではできませんでした。tableを使えば可能でしょうが今回はtableなしという事でお願いいたします。
- takosuke88
- お礼率82% (391/476)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> ４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました 4つ目の方法なら検討の価値ありと、思われるのなら、以下のサイトに、左の文字が多い場合の書き方と、 どちらのdivの文字が多くても段組が崩れない方法が紹介されています。 簡単に書くと、下に float:clear を使ったダミーのdivを追加する、というものです。 フッターに使っているdivがあるならば、それを利用してもいいと思います。 http://allabout.co.jp/computer/hpcreate/subject/msubsub_series_hpcreate05.htm （私が書いた4つ目の方法は、このサイトのパクリです） CSSだけで段組を・・・ というのは、ちょっとした事でレイアウトが崩れてしまうという、 難しい問題がありますね。 私はまだ、真剣に検討した事がないので詳しくは知りませんが、position:absolute を使っての 解決方法があるのかも知れません。 参考リンク http://css.uka-p.com/ http://desperadoes.biz/style/dan/index.php http://msugai.fc2web.com/web/CSS/colup.html
その他の回答 (1)
- harlan
- ベストアンサー率77% (234/303)
divなどのブロック要素を下揃えにする、すっきりした方法は思いつきません。 高さが揃っていればいい、というのであれば、絶対値で高さを指定してしまう、 という安易な方法はなしですか？ <html><head> <style type="text/css"><!-- .left { width: 200px; height: 200px; float: left; background-color: lightblue; } .right { width: 200px; height: 200px; background-color: lightpink; } --></style> </head> <body> <div class="left">あいうえお</div> <div class="right">あ<br>い<br>う<br>え<br>お</div> </body></html> 左右のdivをひと回り大きなdivで囲んでしまえば、中のdivの高さが変わっても、height: 100% としておけば、左右のdivの高さは揃います。外のdivの絶対値指定は必要です。 <html><head> <style type="text/css"><!-- .out { height: 200px; } .left { width: 200px; height: 100%; float: left; background-color: lightblue; } .right { width: 200px; height: 100%; background-color: lightpink; } --></style> </head> <body> <div class="out"> <div class="left">あいうえお</div> <div class="right">あ<br>い<br>う<br>え<br>お</div> </div> </body></html> どうしても、下揃えにしたいのなら、高さを絶対値指定して、margin-top を自分で計算する という方法しか思いつきません。 <html><head> <style type="text/css"><!-- .out { height: 200px; } .left { width: 200px; height: 100px; margin-top: 100px; float: left; background-color: lightblue; } .right { width: 200px; height: 100%; background-color: lightpink; } --></style> </head> <body> <div class="out"> <div class="left">あいうえお</div> <div class="right">あ<br>い<br>う<br>え<br>お</div> </div> </body></html> divに枠線を使っていないなら、外のdivの方に背景色を付けることで、見た目だけ 高さが揃っているようになります。これだと、高さを絶対値で指定する必要はありません。 （枠線を付けると、インチキがバレます。） <html><head> <style type="text/css"><!-- .out { width: 50%; background-color: lightblue; } .left { width: 50%; float: left; } .right { margin-left: 50%; background-color: lightpink; } --></style> </head> <body> <div class="out"> <div class="left">あいうえお</div> <div class="right">あ<br>い<br>う<br>え<br>お</div> </div> </body></html>
お礼
こんなにたくさんありがとうございます。 ４つとも検証させていただきました。内容物が大きさ固定の画像ならいいのですが、大きさを固定できない文字の場合、どれも膨張時に不具合が発生してしまうようですね。膨張をみこして余裕をもたせるとそれはそれで不自然ですし… ４つ目の方法はなるほどと思いましたが左の文字が多い場合、Ｌ字型になってしまいました… やっぱtableしかないのですかねえ～
関連するQ&A
- 【ＣＳＳ】floatで左右に並べた<div>のマージンが効かない。
ＣＳＳ(スタイルシート)においてfloatで２つのdivを左右に並べる方法は定番ですが、<div id="A">に設定したマージンが【firefox】でききません。 おそらく基礎的なことと思われますが、検索の仕方が悪いのか、 該当する質問を探し出すことが出来ませんでしたので、質問させていただきました。 どなたか、教えていただければと思います。 【HTML】--------------------------------- <div id="A"> <div class="B"> <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> <div class="C" > <h3>テキスト</h3> <p>タイトル</p> <table> <tr> <th scope="col">テキスト</th> <td>テキスト </td> </tr> <tr> <th scope="col">テキスト</th> <td>テキスト</td> </tr> </table> </div> </div> 【CSS】--------------------------------- #A { margin-bottom:10px } #A h3{ background:url(../images/bg_h3_option_half.gif) no-repeat; width:380px; height:31px; padding:0 0 0 15px; margin:10px 0 0 0; overflow:hidden; font-size: 22px; color:#FFFFFF; font-style:normal; } #A div.B { float:left; width:380px; height: 100%; margin-right:20px; } #A div.C { float:left; width:380px; height: 100%; }
- ベストアンサー
- HTML
- CSSでdiv内を下揃え
CSSでdiv内を下揃えは出来ないものでしょうか? テーブルを使った時の以下の表現をCSSで表現したいです。 <TABLE border="0" height="200"> <TR> <TD>ここは上から●pxに画像配置</TD> </TR> <TR> <TD valign="bottom">ここを下揃えで画像表示</TD> </TR> </TABLE> テーブルならすぐできるのですが… 下揃えの方法があれば教えてください。
- ベストアンサー
- CSS
- リスト内での画像の下部揃え
下記のように、上部テキスト下部画像の組み合わせで、横並びでリストを作りました。 テキストの量に合わせて、画像が上下するので、見栄えが悪いです。それをテキストは そのままの位置で、画像は下部でそろえたいと思います。それが不可能な場合 せめてすべて下部で合わせたいです。 display: inline-block; vertical-align: bottom; を記入しましたが、全く効果ありません。 どうすればよろしいのでしょうか？ HTML <body id="news" class="s"> <div > <ul class="u1" > <li><span class="time">テキスト</span> <div class="news_img"> <img src="hoge.jpg"> </li> </ul> </div> </body> CSS #news.s ul { padding: 10px; width: 100%; } #news.s li { float: left; width: 170px; height: 240px; padding:0 10px 8px 0; font-size: 12px; list-style: none; display:block; vertical-align: bottom; } #news.s li img { display: inline-block; vertical-align: bottom; border: solid 1px silver; width: 140px; height: 140px; max-width: 140px; max-height: 140px; } .news_img { display: table-cell; height: 160px; text-align: center; width: 160px; margin-top: 10px; } div.news_img div { /* IE 7 */ display: inline; zoom: 1; }
- ベストアンサー
- CSS
- cssのfloatについて質問があります。
cssのfloatについて質問があります。 floatがなかなか理解できずに悩んでおります。 下記のようなcssがあり、同じブロック要素でも table,pなどは右に回りこみ、divボックスはfloatを指定しないと floatボックスの下に入ってしまうのをなんか理解できません。 初歩的なことかもしれませんが、 どなたかアドバイスいただけると助かります。 宜しく尾根会い致します。 <html lang="ja"> <head> <title></title> <style type="text/css"> #con { width: 800px; border: solid 1px black; } .left { width: 300px; height: 300px; float: left; border: solid 1px blue; } .right { width: 200px; height: 200px; border: solid 1px red; } table { width: 100px; height: 100px; border: solid 1px green; } p { border: solid 1px yellow; } </style> </head> <body> <div id="con"> <div class="left"> </div> <table> <tr><td>TABLE</td></tr> </table> <p>ppppp</p> <div class="right"> </div> </div> </body> </html>
- ベストアンサー
- HTML
- DIVボックス内でのCSSを使用した縦位置指定方法
CSSにてheight、weightを指定したDIVタグの中にテキストを記述し、縦位置の中央揃えを行いたいのですが、方法がわかりません。 "vertical-align:middle;"などを指定しましたが、適用されませんでした。 スタイルに関することは全てCSSで行いたいので、TABLEタグなどでvalignを指定する方法は取りたくありません。 何かいい方法をご存知の方がいらっしゃいましたら、ご回答をよろしくお願いいたします。
- 締切済み
- HTML
- 【HTML/CSS】ブロック内の中央揃え
HTML初心者です。 tableのセルにリンクを張り、cssで {display:block;} と設定し、セル単位で別ページへリンクできるようにしました。 しかし、blockで設定するとセル内のリンクが中央揃えになりません。 text-alignやvertical-alignを設定しても中央揃えできません。 手をこまねいているのでアドバイスがほしいです。 よろしくお願いします。
- 締切済み
- インターネットビジネス
- floatさせたdivタグを折り返させたくない
Javascriptで開いた子ウィンドウ内のページについて レイアウトで困っております。 以下のようなブロック要素の配置について <div> <div style="float; left"> コンテンツA </div> <div style="float; left"> <div> コンテンツB </div> <div> コンテンツC </div> </div> <div style="clear: both"> </div> 以上のような配置になっており、 コンテンツ３の中身をJavascriptで書き換えています。 その際、コンテンツCの横幅が変動し右に大きく広がる場合があります。 それにより、ウィンドウサイズによってはコンテンツBCがコンテンツAに回りこんでしまいます。 何故こうなるかは理解出来るのですが、対策が思い浮かびません。 ●思いついたが避けたい対応策 ・親のdivタグに想定出来る最大値のwidthを設定する ・tableタグによるレイアウト 良い対応策はございませんでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- CSS：文字の上下の中央揃え
h3要素、クラス属性「midasi」の高さが30pxで、その上下の中央揃えをしたいのですが、「vertical-align: middle;」を指定しても変化がありません。 どのプロパティを指定すればよいでしょうか？ 回答よろしくお願いします。 ■HTML <link rel="stylesheet" href="../rensyuu_CSS/rensyuu_CSS.css" type="text/css" /> </head> <body> <div class="kukaku_zen"> <div class="kukaku1"> <h3 class="midasi">見出し1</h3> <p class="bun"> 文章1 </p> </div> <div class="kukaku2"> <h3 class="midasi">見出し2</h3> <p class="bun"> 文章2 </p> </div> </div> </body> </html> ■CSS h3.midasi {height: 30px; vertical-align: middle; text-align: left; font-family: "ＭＳ ゴシック"; background-color: #88ceff;}
- ベストアンサー
- HTML
- CSS・DIVについて
CSS初心者ですが、質問させていただきます。 ＜やりたいこと＞ 同一ページ内にて、下記の(1)(2)をCSSで指定したい。上から(1)(2)(1)の順で表示したい。 (1)幅700、文章中央揃え (2)幅600、文章左揃え ＜私が作成したもの＞ （関係ない部分は省略しています。） （実際は、(1)(2)の部分は半角英字の名前をつけています） <head> <style type="text/css"> body { text-align: center; } div#(1) { width: 700px; margin: 0 auto; text-align: center; } div#(2) { width: 600px; margin: 0 auto; text-align: left; } </style> </head> <body> <div id="(1)">タイトル</div> <div id="(2)">説明文</div> <div id="(1)">ホームに戻る</div> </body> ＜表示のされ方＞ (1)は正常に表示されているのですが、(2)にはCSS自体が適用されていないのです。 ちなみにIE9では私の思うように表示されるのですが、IE10になって表示されなくなりました。 なぜこのようになったか、お教えいただけますでしょうか。よろしくお願いいたします。
- 締切済み
- CSS
お礼
なるほど。いろいろありますね～ よく読んで 勉強してみます。 ありがとうございました！