雑記的な...

いろいろと勉強途中のドシロウトが書く雑記

スポンサー広告

スポンサーサイト

更新日時:--/--/-- --:--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

stylish

ニコニコ動画-OldStyleの問題点

更新日時:2008/03/07 04:11

この記事で書いたCSSですが、ひとつ問題点があります。

テーブルをブロック化してfloatで回りこませることによって2列表示にしているのですが、左側のボックスが右のボックスより大きくなると表示が崩れてしまいます。

なぜかというと左側のボックスが大きくなると、左側のボックスとのわずかな隙間に下のボックスが回りこんでしまうためです。

entry25_niconico1.gif

min-heightで大き目の高さを指定してある程度余裕を持たせていますが、タイトルや最新コメントの文字数が多い場合、やはり崩れてしまいます。overflow:hiddenではみ出た部分はカットするという方法もありますが・・・。

これを回避する方法としていくつか考えられるのは、左側のボックスに合わせて右側のボックスも大きくする、floatを解除する、がありますがどれもできそうにありません。

前者を実現するためには、横2つを囲むボックスが必要ですがそんなものはありません。後者を実現するためには3の倍数+2番目のボックスのみを解除しなくてはなりませんが、CSS3のnth-childでも使わない限り3の倍数+2番目だけに設定するのはできそうにありません。隣接セレクタで1つ1つのボックスに指定すればできますが、あまりにも現実的ではありません。

根本的にやり方を変えるべきなのか、何か回りこみの回避方法があるのか・・・アイデア募集中です。

追記

結局overflow:hiddenでサイズが大きくならないようにしました。。。
-moz-column-countによって段組表示にしました。

スポンサーサイト

コメント

コメント投稿後、編集や削除する可能性がある場合にはpassが必要になりますので、passを入力してください。また、ただ宣伝するだけのコメントと判断した場合は削除しますのでご了承ください。

コメントの投稿
管理者にだけ表示を許可する

トラックバックURL

トラックバック一覧

検索


WWW を検索
このブログを検索

Amazon


紹介

Firefoxのアドオン「Stylish」で使えるCSS作ってます。
こちら
stylishとは?

Mozilla Firefox ブラウザ無料ダウンロード

カレンダー

05│2018/06│07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30

Copyright © 2008 雑記的な... All Rights Reserved

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。