閉じる
閉じる
閉じる
  1. wordpressで「致命的なエラーをチェックするためにサイトと通信で…
  2. Adobe Illustrator CC 2018の表示が崩れる
  3. SEO対策としてディスクリプション(descriptionタグ)の最適…
  4. SEO対策としてタイトルタグ(titleタグ)の最適な文字数は
  5. wordpressでプラグインを使わずに画像をランダム表示させる
  6. Illustrator CC 2015で配置画像を収集する方法
  7. デザイン変更しました
  8. WordPressのユーザー権限の日本語表記と英語表記
  9. Thunderbird(サンダーバード)の左側のメールフォルダが表示さ…
  10. wordpressプラグイン「WP Slimstat」を日本語化する方…
閉じる

海の森 SOHOデザイン ブログ

高さの異なるボックスを揃えるCSS

こんにちは。
SOHOデザイナーのAquaForest-アクアフォレスト-です。

cssで組んでいる時に高さが異なるボックスを配置してフロートしたりすると、
記事が回り込んでしまい思う様に表示出来無い場合があります。

また背景に色をつけたい場合にも内容量が少ない方に背景色を付けると、
途中までしか色が付かなくてかっこわるくなってしまいます。

そんなときでも下記の様に設定すれば解消されます。

HTML

<div id="mainbox"></div>
<div class="box">テキスト</div>
<div class="box">テキスト</div>
<div class="box">テキスト</div>

CSS

#mainbox {
overflow: hidden;
}
.box {
float: left;
padding-bottom: 32768px;
margin-bottom: -32768px;
}

32768という数値はIEの表示限界であると言われているそうです。

関連記事

  1. スマホで見た際にwidth100%なのに途中で背景色が切れる

  2. CSSで最低の高さを設定

  3. CSSで最小の長さを設定

  4. 長いURLや半角英数字などを自動改行(折り返し)させる方法

  5. CSSで最大の高さを設定

  6. 画像の下の余白をなくす

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


おすすめ記事

  1. wordpressで「致命的なエラーをチェックするためにサイトと通信できないため、PHP の変更は取り消されました。SFTP を使うなど、他の手段で PHP ファイルの変更をアップロードする必要があります。」と出た場合
  2. Adobe Illustrator CC 2018の表示が崩れる
  3. SEO対策としてディスクリプション(descriptionタグ)の最適な文字数は
ページ上部へ戻る