DIV BOX の高さを合わせたい。min-height,max-height,min-width,max-width
例えば、こういうやつ。 <?php $h = 0; ?>
ボックスの高さを合わせる方法
かきくけこ
かきくけこ
新着とか出す時
商品を並べるとき
困るよね?
商品を並べるとき
困るよね?
あいうえお
かきくけこ
かきくけこ
あいうえお
かきくけこ
さしすせそ
かきくけこ
さしすせそ
min-heght max-height を使うと高さを合わせられる。
div のスタイルの height を使ってもだめなのだ。
ところが min-height , max-height を使うと合わせることができる
<div style="min-height:50px;float:left;border:1px solid #ccc;margin:5px;padding:5px;"> ボックスの高さを合わせる </div>
↑は、もちろんクラスで指定すればいいのだけど、わかりやすく例えば全部の div に min-height を指定する。
すると
<?php $h = 50; ?>
ボックスの高さを合わせる方法
かきくけこ
かきくけこ
新着とか出す時
商品を並べるとき
困るよね?
商品を並べるとき
困るよね?
3行の場合だけ、とびぬけてますけどね。
ということで、3行の時は、それ以上高くならないようにしたい。
<div style="min-height:50px;max-height:50px;float:left;border:1px solid #ccc;margin:5px;padding:5px;"> ボックスの高さを合わせる </div><?php $h = 50; $x = 50; ?>
ボックスの高さを合わせる方法
かきくけこ
かきくけこ
新着とか出す時
商品を並べるとき
困るよね?
商品を並べるとき
困るよね?
文字部分どーしよー。
mb_strimwidth を使ってみよう。
php を使って文字列長をあわせてあげればいい。
これは、あくまでも固定文字だからわざわざこんなことせんでも。。。
とか言わないように。 post データを処理することを想定したサンプルなのでご理解くだされ。
<div style="min-height:50px;max-height:50px;float:left;border:1px solid #ccc;margin:5px;padding:5px;"> ボックスの高さを合わせる </div> <?php $str='新着とか出す時<br />商品を並べるとき<br />困るよね?'; $str_length = 32; $str=str_replace('<br />','#',$str ); $str=mb_strimwidth($str,0,$str_length ); $str=str_replace('#','<br />',$str ); ?> <div style="min-height:50px;max-height:50px;float:left;border:1px solid #ccc;margin:5px;padding:5px;"><?php echo $str; ?> </div><?php $h = 50; $x = 50; ?> <?php $str='新着とか出す時
商品を並べるとき
困るよね?’; $str_length = 32; $str=str_replace(‘
‘,’#’,$str ); $str=mb_strimwidth($str,0,$str_length ); $str=str_replace(‘#’,’
‘,$str ); ?>
ボックスの高さを合わせる方法
かきくけこ
かきくけこ
<?php echo $str; ?>
が、言語系の考えること。
でも css には、便利な機能がある。
いや、css もかなり進化したねぇ~。
overflow: hidden; を使う
overflow: というのは、BOXからはみ出たときの処理を指定するものだ。
<style> .strbox{ min-height:50px; max-height:50px; float:left; border:1px solid #ccc; margin:5px;padding:5px; overflow: hidden; } </style> <div class="strbox"> ボックスの高さを合わせる </div> <div class="strbox"> ボックスの高さを<br /> 合わせる方法 </div> <div class="strbox"> あいうえお </div> <div class="strbox"> 新着とか出す時<br /> 商品を並べるとき<br /> 困るよね? </div> <div class="clearfix"></div> </div><?php $h = 50; $x = 50; $mw=130; $xw = 130; ?>
ボックスの高さを合わせる
ボックスの高さを
合わせる方法
合わせる方法
あいうえお
新着とか出す時
商品を並べるとき
困るよね?
商品を並べるとき
困るよね?
<?php $h = 50; $x = 50; $mw=130; $xw = 130; ?>
overflow | 見え方 |
---|---|
visible |
あいうえお
かきくこさしすせそ |
hidden | |
scroll |
あいうえお
かきくこさしすせそ |
auto |
あいうえお
かきくこさしすせそ |
overfloawの指定なし |
あいうえお
かきくこさしすせそ |
なんでべんりなんだろ~。
こうなってくると、幅とかもあわせたくなるわけだ。
その場合は、
min-width max-width を使う
<style> .strbox{ min-height:50px; max-height:50px; min-width:130px; max-width:130px; float:left; border:1px solid #ccc; margin:5px;padding:5px; overflow: hidden; } </style> <div style="margin:5px;padding:4px;border:1px solid #999;"> <div class="strbox"> ボックスの高さを合わせる </div> : : <div class="clearfix"></div> </div><?php $h = 50; $x = 50; $mw=130; $xw = 130; ?>
ボックスの高さを合わせる
ボックスの高さを
合わせる方法
合わせる方法
あいうえお
新着とか出す時
商品を並べるとき
困るよね?
商品を並べるとき
困るよね?
min-height,max-height,min-width,max-widthをつかって、安定の DIV BOX を作れることを祈りますwww
スポンサーリンク