divの中に複数のdivを作り、内部のdivをfloatさせます。
このとき、外側のdivの高さが内部のdivの高さに合わず、レイアウトが乱れてしまいます。
そんなときの解決方法です。
外側のdivに「height:auto」と「overflow:hidden」を設定するだけです。
XHTML
1 2 3 4 5 6 7 8 |
<div class="box"> <div class="smallBoxA"> ボックスA </div> <div class="smallBoxB"> ボックスB </div> </div><!-- box --> |
CSS
1 2 3 4 5 6 7 8 9 |
.box{ height:auto; overflow:hidden } .smallBoxA,.smallBoxB{ width:200px; float:left; } |
人気記事一覧
- MySQL 最大の値・最新の日付データを1つ抽出する方法(MAX)
- [CakePHP] XformHelperの使い方
- Linux: スワップファイル(swp)の削除方法
- HTMLのForm methodとactionについて
- PHPでカンマ区切りデータを配列に入れる方法 (explode)
- [エラー対処] failed to open stream: No such file or directory
- [vsftp] FileZillaから接続できない場合の対処法
- [CSS]ブロック要素(div)の高さを、内部のfloat要素に合わせて自動調整する
- PHP5.1→PHP5.3へバージョンアップする方法(CentOS)
- PHPでテキストを1行ずつ読み込む方法(file_get_contents,explode)
関連記事一覧
- [CakePHP2]フォームのチェックボックスの複数グループ化(二次元配列)
- Twentytenの横幅を広げ、3カラムにする方法
- PHPで配列をカンマ区切りに変換する方法 (implode)
- [PHP] 画像の縦・横の数値(大きさ)を取得
- [CakePHP2]TwitterBootstrapのフォーム(input)の幅を変更する方法
- HTMLソースを取り出す(閉じタグが無い場合の処理)preg_match_all
- PHP 掛算の表の作成 (for構文)
- CSS リストに画像を付ける
- mysqli_real_escape_string(特殊文字のエスケープ、無害化)
- MySQL テーブルのデータ量を知る方法 (data-length)