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

海の森 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. CSSで最大の高さを設定

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

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

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

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

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

コメント

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

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

CAPTCHA


ピックアップ記事

  1. こんにちは。SOHOデザイナーを目指しているAquaForest-アクアフォレスト-です。…
  2. こんにちは。SOHOデザイナーのAquaForest-アクアフォレスト-です。投稿してい…
  3. こんにちは。SOHOデザイナーのAquaForest-アクアフォレスト-です。ホームペー…
ページ上部へ戻る
Top