公開日: 2009年02月07日(Sat)
今日はなりふりかまわずいろいろ雑多にメモを・・・。だって忘れそうなんだもん。
CREAMUさんとこの記事『複数カラムの高さをそろえるクロスブラウザなCSS』で紹介されていたテクニック(本家)。これはいつか使うだろ。と思ったんで、忘れないようにソースをメモる。
<!-- XHTML -->
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
<!-- CSS -->
<style type="text/css">
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
</style>
ちょっとトリッキーすぎて、どの数字をどう変えると、どの幅がどう変わるのかがわかりにくいが、ちょっとやってみて解読していきたい。
あと、コリスさんから、[JS]わずか「12文字」でIEを判別するスクリプト。
// IE判別
IE='\v'=='v';
すごいなぁ。なぜ12文字にこだわる必要があったのかわからないけど、すごいなぁ、12文字。続編 [JS]Firefox 2/3, Safariも判別する1行のスクリプト も。
・・・あぁ、なんか、他にもたくさんあったような・・・。最近いろいろサボってるなぁ。思い出したらまた個人的メモります。
なんだっけなぁ・・・?
公開日: 2009年02月07日(Sat)