さて、今日はハイキングだったわけですが、雨ということで大幅にルートを短縮することに。
その結果、ゴール地点から駅まで歩く方が長かったという状態に。
実質歩いてないと一緒だしね。まぁしょうがない。
まぁ、電車賃がケチれて、電車の時間も取りやすくてという理由だったわけだけど。
友人が自宅に帰るのについていって、途中まで出て、行ったというわけさ。
まぁしかし残念なことです。
そんなわけで、昼間の電車は空いてるなぁと思いつつ帰ってきたわけですが…
今日、やっと、indexのスレッド一覧を修正しました。
といっても十分大画面の人は気付かないか…
難儀なfloatの加減ですわ。floatというのは難儀なもんで
・float:leftとすると、本来の流れから脱落して、とにかく左に飛ばされる
・後ろのブロックでもfloat:leftとすると、本来の流れから脱落して、前に飛ばされたブロックのところまで左に飛ばされる
・他の内容は左に飛ばされた、残りの右部分に押し込まれる
・clear:leftとすると、float:leftで飛ばされたものや、右に押し込まれた物に干渉しないように下に飛ばされる
・しかし、親ブロックの大きさは追従しないことがある
という困ったものでして…
これを使って、箇条書きのliを横並べにして、変な表で構成していたものを代替しようとしたわけだな。
ただ設定がいい加減で、変なことになってたと。
さて、結論を書こう。まずHTML
<ul id="subj">
<li>1:あああ</li><li>2:いいい</li><li>3:ううう</li>
<li style="clear:left;">4:あああ</li><li>5:いいい</li><li>6:ううう</li>
</ul>
あらかじめ、改行部分のところにはclear:left;と、書き込んであります。
この上で、スタイルシートにCSSを書くと。
ul#subj {border:solid 2px red; list-style:none; padding:0px; margin:0px; overflow:hidden;}
ul#subj li {background-color:yellow; color:black; border:solid 1px black; width:33%; float:left;}
ulの方は箇条書きのマークを消して、その分のスペースを取るためにpadding,margin共に0にしてある。
liをfloat:leftで左にとにかく飛ばしてると。
ただ、それだけでは、liは親ブロックからはみ出してしまう。だからoverflow:hidden;と書いてある。
なんか納得がいかんことなのだが、overflowの標準の値visibleと今回設定したhiddenではボックスの高さの計算法が違うと。
そんなわけで、それを応用してあると。
それにしても、floatは複雑だからできれば使いたくないな。
ただ、横並べというのは意味のないtable撤廃に役に立つし、そのためにはfloatは非常に重要。
複雑だけど、使えるだけでよければ、
・左から並べるブロックにはfloat:left;を、加え改行部にはclear:left;を
・親ブロックにoverflow:hidden;をつける
というだけで、まぁ話になりそうです。
以前、こういうことをいちいち座標指定でやってたんだよね。
手間がかかりすぎる上に、文字サイズを変えると崩れるし…
その点にはfloatはある程度強いですよ。
うまいこと使える用にしていこう。