ITを表現する

別のクイックちぇ。 ここでCSSの電源を使用してシンプルで素敵な何かがある...しかし、始まることは困難concieve（それはきっと私ではありませんでした）であった。 ドロップシャドウを追加すると、PhotoshopのANF花火などのような編集ツールをいくつかの画像を使用して、私たちの多くのためにケーキのピースはあるかもしれ
私はCSSを使ってドロップシャドウを選んだ理由は、通常、アプリケーションのページデザイン/ HTMLを作成するときに、要件が反復しておく、ということです。 私は何を意味することは、多くのイメージを持つ既存のWebサイトでは、のfreindsリストまたはイメージギャラリーの表示であるような、それはそのために、再処理に既に影を追加または削除するには、アンロードされた画像の全体の負荷が困難になり、ある問題。
これらの余分部門または追加するには、HTMLテキストの作成中に少し前進思考を行っているそうだとすれば、通常状況では、XSL、PHPでこれらのアイコン/サムネイルを生成ループロジックを持っているということです。 JAVAやその他のプログラミング/スクリプト言語は、いつでも追加することができますし、ちょうどショーやこれまでの要件を変更するクライアントごとに、CSSのdisplayプロパティを使用して、これらの影を隠すことの問題です...私は前方に考え、この種を行ってやりなさいこの前に...しかし、ahevは今始まった！

以下の例では、元のイメージは影は無料ですし、必要に応じてdropshadowsが適用されます！ また、私についての私の以前のツタンカーメンのトリックを（Well!これらは、おそらくチュートリアルの最短様々ですので、それが唯一のそれらの"ツタンカーメン"の呼び出しに正当化される）を使用して、少し余分を行っているCSSのClipプロパティを使用して見せびらかすためだけに

オリジナル画像

CSSのドロップシャドウの結果

デモ表示 | ダウンロード、ソースファイルを

なぜ私はこれを理解したいか？ ヒュム...！！

CSSの作家のほとんどは、そのCSSのClipプロパティは、おそらくほとんどの未使用のCSSプロパティの一つです同意するだろう。 それはあまりにも私にとっては本当だったので、私は変更を開始するまでは、それを無視するのが最も幸せだったMooToolsのTWOノブ（ピン）Sliderコンポーネントを（範囲インジケータ付き） 。

スライダの範囲を示すために切り取られbackgroudのイメージ（可変幅の分割に対して）を使用して、Sliderコンポーネントを変更するコンポーネントのいずれかのユーザーから良い提案がありました。 したがって、私の楽しみを入力する時間はなく、CSSのClipプロパティの非チャーター（私のためにofcourseの）水が来ました。

よく！ それはどのように困難になることができますか？ あまりすべてで... YESとNO。 CSSのClipプロパティを使用する構文はかなり直立であるが、意味は/ usuageビットcroockedです。 私のようなメモリでは、毎回私は、スライダのスクリプトの手直しに座っている...私は自分自身に私のスクリプトで作成したロジックを思い出させるために、このClipプロパティの使用方法に戻ってtokeepを参照している.... それゆえ！ それは未来（とも思われる人々の利益のためにCSSのクリッププロパティでboggled）覚えておくべき希望をもって、ペンをダウンすると考え

CSSのクリップは何をしますか？

クリップはCSS 2.1のビジュアルエフェクト·モジュールの一部です。 簡単に言えば、そのジョブは追加のファイル（作成しなくても、それ故に画像をクリッピングしてサムネイルを作成、クリッピングされているオブジェクトの上に表示されるウィンドウを配置することです私はすでに、Sliderコンポーネントの活用には、この機能を入れている ）

CSSのClipプロパティを使用して、四角形の図形を使用してクリッピングを作成することができます。 rectを使用して、多くの他のCSSプロパティ（マージン、パディングなどのように）、同様に必要とする4つの座標上、右、下、左（TRBL）。 あなたはこれらの4つの座標を（しばらくの間、トスに脳を送信）を使用して、クリップのクリッピング領域を計算する方法を詳しく見てみたときに、このプロパティのcroocked性質が反映されています。 今、あなたを混乱させるボトムは、トップから始まり、右は左から始まります。 。 あなたは私が言った？を参照してください。 .... したがって、このポスト...

この小さな混乱は簡単に以下のCSSクリップ/矩形プロパティのこの視覚的な説明と、消えることができます！！

CSSクリップの要件

我々が開始したタスクは、正方形を見た画像（また、広角画像）に次のサムネイル画像をクリップすることである

オリジナルThumbnal /イメージ	Sqaure Thumbmailのクリップの要件

CSSのクリップが見つかりました

デモ表示 | ダウンロード、ソースファイルを

この問題は、数回前に私の心を交差させ、私は/ PHPとWordPressの周りの初心者をportal.Beingサイトの一部のコンテンツのブログや新しい種類を表示するためにWordPressを使用している、以前もサイト上で働いていたとき、私は続け"これはケーキのピースは私ではありません"と考え、それをprocastinating。 ついに！ ソリューションのためのビットの周り掘りを開始したとき、この要件は、私の鼻件まで来ました。
私はそれが本当に私は実際にそれだけでPHPを少しと、WordPressのAPIを使用して 、WordPressのパワーセクションの外に他のページに見出しの一覧や最新の記事を表示するには、思ったより簡単だったことを知って驚いた。

ここで何をすべきかです： -
説明上の理由から、あなたのサイトがあると仮定http://www.inchembur.com/ 、あなたがこのサイトのニュースセクションがあるhttp://news.inchembur.com/を （WordPressを実行している）。 現在の要件は、最新の記事を表示することですhttp://news.inchembur.com/すなわち、メイン·サイトのホームページにhttp://www.inchembur.com/index.php

ステップ1：あなたのindex.phpに次のコードを追加するピースは、WordPressのAPIファイルをインクルードします。 あなたがあなたの投稿が上に表示するページの先頭にこれを追加することができます。

<？PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme （ 'WP_USE_THEMES'、false）を 定義します 。WordPressのテーマ/ / Disbable使用
（ 'は/ var / news.inchembur.com / WP-ブログ-header.phpの'）を必要とする/ /は、WordPressのAPIを含む
; // Get Latest Post query_posts（ 'showposts = 1'）; / /取得最新の投稿
？>

インクルードの上記のピースは、我々は唯一の単一の最も最近のポストを得ています。 あなたがしようとする場合は、より多くのバリエーションが、掘り下げてお気軽にquery_posts()のドキュメント 。

ステップ2：さて、あなたはから最新のWordPressの記事を表示するインデックス/ホームページの一部でhttp://news.inchembur.com 、次のコードを使用します。 デザインのニーズに従って広告あなたのスタイリング部門、スパンとクラスにお気軽に、言うまでもない。

ステップ3：noステップ3はありません...それをThats ...あなたはこれで完了です！

最新の記事とは対照的に、どのように特定のポスト/ページを表示する： -
これは簡単に引数を変更することで回避できます。 query_posts()ページIDやページスラッグを含むように

) ; query_posts（ 'page_idの= 7'）;
) ; query_posts（ 'ページ名=約'）;

またはあなたはポストの数を制御することができます。
) ; query_posts（showposts = 3）;

時にはpageweightを保つために...私たちは断片に私たちのスクリプトを分割している...必要なときにこれらのJavaScriptの断片は次のようにロードされ、することができます（イベントまたはその他のリンクやボタンのクリックを参照）。

Javascriptをロードすると、動的にシンプルで単純明快以下のようには...

= “text/javascript” > < スクリプトの タイプ = "text / javascriptに">
機能loadNewScript（ソース）{
varの= document.createElement（ 'スクリプト'）;
s.setAttribute（ 'タイプ'、 'テキスト/ javascriptの'）;
s.setAttribute（ 'src'には、ソース）;
document.body.appendChild（秒）。
}
</ SCRIPT>

とどこにでも体内の次の呼び出しリンクを持つことができるか、文書自体は、このスクリプトの "onload"を持つことができます...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a >は、<a href = の"javascript：loadNewScript（ 'myDynamicScript.js'）;">負荷動的スクリプト</ a>を

または

<body onload="loadNewScript('myDynamicScript.js');">

あなたは、CSSの方であれば、クロスブラウザの作業、レイアウトを得ることに痛みを知っているだろう。 IE8はまだ私達の開発のための作品内の別のスパナです。 Anywaz！ 私はあなたの完璧な作業IE7のCSS（およびそれ以前）とFirefoxが突然IE8でかんしゃくを投げ始めた昨日、行ったようにあなたは、この問題にヒットした場合、次を試してみてください...それは素敵な瞬間のための私の問題を解決するように見えた....

META宣言を使用して、我々はIE8を使用したいレンダリングエンジンを指定することができます。 ので、IE8はIE7のようにレンダリングするために強制的に...あなたの文書の頭に次のメタタグを挿入します -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

デフォルトではIEのメタは次のようになります -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
これは、IE8の新しい標準モードを使用してページをレンダリングすることになります。

必要な場合は、この構文は、以下のように、他のブラウザのために収容するために使用することができます。

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

DOCTYPESについての詳細：

あなたはまだ "DOCTYPE"と呼ばれる動物の種類に精通していない場合は...ここにいくつかの簡単な読み取りです。
DOCTYPESは何ですか？ BROWSERの癖＆STRICTモードは何ですか？
XSLにDOCTYPEを設定する

DOCTYPES約深さを理解する上で詳細については、これらのリンクを訪問してみてください...
List Apartの：右DOCTYPEを使用してサイトを修正！
別にリスト：DOCTYPEを越えて：Web標準、前方互換性、およびIE8

注：しかし私たちの多くはHTML / CSSの人が右のDOCTYPEを設定すると、私たちの文書にDOCTYPE declerationの重要性を無視されているが、通常、ほとんどのクロスブラウザの問題への答えです。

だけでなく、MooToolsは、多くのそこカルーセル、様々な、私はまだいくつかの良い理由のために、私自身のカルーセルクラスを書くことにした
1。 ページング機能を（カルーセルで特定のスライド/ステップにジャンプできるようにするには）いました。
2。 左ボタンと右ボタン/リンクの配置の自由、どこまで私がお願いしたかった。
3。 スライドステップをより詳細に制御。

私は上記の機能を備えた、新しいカルーセルを作成する管理でした...以下のように...あなたが必要となるすべての変更を示唆してお気軽に！

私の例は次のようになります... [ デモを見る ]

デモを見る | ページングバージョン1.0でダウンロードMooToolsはカルーセル （1986回ダウンロードされる）

1。 カルーセルページング

あなただけで簡単にページングをtrueにMooCarouselのインスタンスを作成しながら最後のparaterが渡されたフラグ（ページングしたい）またはfalse（donotは、ページングを望む）を設定することにより、あなたのカルーセルへのページングを追加することができます。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、 真の ）;スライドの/ / NS =番号、SSS =スライド·ステップ·サイズ

とofcourseのあなたはそれらのCSSを変更することにより、好きなようにこれらのページングachorsのルック·アンド·フィールを変更することができます。

。carousel_paging {テキストが整列：右;マージン：5pxの10pxの0 0;}
。。carousel_paging現在、carousel_pagingページ{アウトライン：なし;幅：15px、高さ：15px;行の高さ：15px;テキスト整列：センター;表示：ブロック;フロート：左;背景：＃D8D8EB;マージン：0 1pxの0 0;テキスト装飾：なし;}

。carousel_paging：ホバー、carousel_paging現在の{背景：＃4D4D9B;色：＃000000;}。

よく！ 小さな問題は、しかしそこには、ページングアンカーが設定されている場合、それはカルーセルコンポーネントの後に常に生成されるでしょう。 私は同様にそれを動的にしたかったが、それだけの割合を吹き出すためのスクリプトを保つために、私はそれをスキップすることにしました。
しかし、あなたは少しJavascriptを知って、簡単にあなたのニーズを喜ばせるためにMooCarouselクラスのページング生成コードを変更することができます。

2。 左および右のアイコンをカスタマイズする

あなたは、単にCSSで遊んで配置、画像や左ボタンと右ボタンのいずれかdisplatプロパティを変更することができます。 左と右buttomsの配置を変更できるようにすると、右側に私たちのカルーセルクラスに私の実際の理由だった。
idはこれらのボタンのあるこのMooCarouselクラスなので、受け入れて、あなたがしてくださいあれば、実際には、ページ上のどこにこれらのボタンを配置することができます...それは私の例のように、要素の階層構造にする必要はありません。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、TRUE）;

CSS
。carousel_container_l、carousel_container_r {マージン：50px​​ 0 0 0;位置：相対、幅：23px;高さ：20px;フロート：左;カーソル：ポインタ;}

。carousel_container_r {背景の位置：0-38px;}

。carousel_container_l {背景の位置：0-58px;}

3。 スライドステップをカスタマイズする

私は私のカスタマイズスライドステップを何を意味するか？
ほとんどのカルーセル表示されるウィンドウのに完全にスライドさせます。 したがって、4つの項目を（上記の私のサンプルのように）持っていたと言う、それはすべての4つの項目をスライドします。 このカルーセルコンポーネントを使用すると、スライドの数と、選択したステップサイズを渡します。

VAR carousel1 =新しいMooCarousel（ 'carousel1_wrapper'、 'carousel1_items_container'、 'carousel1_moveleft'、 'carousel1_moveright'、c_ns、c_sss、TRUE）;
スライドのc_ns =数、c_sss =スライド·ステップ·サイズ

また、私の例1で私が項目、各項目の幅は、私のCSSでそれぞれの項目の後に与えている余白の番号を知って、ロジックに基づいて、スライドステップサイズをcalcutedしています。

酒盛りの場合1 / * ... * /

VAR c1_w = 92 / /大酒盛りアイテムの幅

VAR c1_n = 10;比較です。の大酒盛りアイテムの/ /合計数

VAR c1_pp比較です。の大酒盛りアイテムperpageの= 4 / /番号

VAR c1_marginFactor = 51;

VAR c1_sss = c1_w * c1_pp / / SSS =スライド·ステップ·サイズ

VAR c1_ns = parseIntは（（（c1_w * c1_n）/ c1_sss）+ 0.5）/ / nsの数=スライド

c1_sss + = c1_marginFactor / / SSS =スライドステップ·サイズ、51の余白

要件：MooToolsは1.2

デモを見る | ページングバージョン1.0でダウンロードMooToolsはカルーセル （1986回ダウンロードされる）

MooRatingは、単純な（それはMooToolsライブラリの電源を使用するので、もちろんクロスブラウザ）、軽量、優れたMooToolsのベースの評価ソリューションです。 それは、評価のイメージ（私はダウンロードをスターやバー、ハーツを提供していますが、あなた自身の様々な作成だけでそれをドロップすることができます）を選択した通りであるかもしれませんという理由だけで、 "ランク"と呼ばれていません。

それはどのように次のようになりません。

	画像が異なるMooToolsの評価デモを見る
	パーセント値でMooToolsの評価デモを見る
	分数の値を持つMooToolsの評価デモを見る

Mootolsランクスクリプトをダウンロード （716回ダウンロード）

評価データ：整数、小数、またはパーセンテージ
現在のスクリプトが10進数（1.24、3.45など）、またはパーセンテージ（12％、55％など）で、全体の値（1,2,3,4,5）のような評価データを表示するために設計されています。 上記のいずれかの形式でデータを表示する選択がJavaScript内でいくつかのフラグの値を変更するだけで設定できます（moorating.js）
基本的にお好みの形式で値を表示するために、で遊ぶには、2つの電子の二つのフラグがあります...

VAR inpercent = falseは、あなたがパーセント値が表示されるように必要がある場合/ /このフラグがtrueに設定します。
1,2ではなくVAR isFractional = falseを/ /あなたは1.24のように小数の値が必要な場合は、これをtrueに設定し、1.25、4.56 ... 5

私はこのために必要なすべての説明があると思ういけない。 また。 スクリプトは非常に簡単です。 あなたは少しjavascriptingを知っていれば、表示値の任意の並べ替えを取得するスクリプトを変更することができます。 例のための3つの小数点以下の桁が表示されるようにしたい場合...ちょうど以下のようにスクリプトを調整...

（isFractional）の場合{（X <= 5 | | x> = 0の）場合moostartval [i]はinnerHTMLプロパティ= FormatNumberを（X、3）;} / / 2が3に変更されます
他{moostartval [i]のinnerHTMLプロパティ=恐らくMath.round（x）を。

評価値の更新：
私はいつもそれができるだけ早くユーザー率のものとして評価を更新するつもりありませんが私の経験から知っているので、定格値を更新するためのすべてのAJAXのスクリプトを書く気にhaventは。 あなたが定格値としたいものは何でも自由に、それはAJAXを使用して更新するか、それを送信または隠しフォームフィールドの値を設定し、フォーム全体等で提出する

機能updateRating（ID、評価）{
/ /警告（ID + "、" +評価）
/ /は、定格を持つものは何でも
}

"updateRating"と呼ばれるJavaScriptの関数があります。 この関数は、（ページ上の二つ以上評価があるかどうか）を評価にとして識別するために、評価事業部のIDを渡された更新と定格の値は[（ID、評価）updateRating]されました。 私は前述したようにあなたは、あなたがこれらの値を好きに選ぶことができました。

評価画像：星、ハート、バーまたは何もしてください。
上記の種類（星、ハートなど）のいずれかに格付けを変更することは非常に簡単です。 ただ提供されるものに似たイメージを作成し、忘れないでインチをドロップすると、イメージの名前を変更した場合、CSSファイル内の必要な変更を加えません、以下を参照してください。

。moostar {マージン：0px;パディング：0px;オーバーフロー：隠された;幅：84px;高さ：20px;フロート：左; 背景：URL（ 'stars.gif'）繰り返しに-x;}
。moostarスパン{フロート：左;マージン：0px;パディング：0px;表示：ブロック;幅：84px;高さ：20px;テキスト装飾：なし;テキストインデント：-9000px;のz-index：20;}
。moostar CURR { 背景：URL（ 'stars.gif'）25ピクセルを左;}

最も評価のウィジェットは、各スターのイベントの上にマウスをスターとハーフスターの画像を使用しています。 武定格とは、非常に低いオーバーヘッドで必要な視覚効果を達成するための背景画像として単純なスプライト画像を使用しています。

要件：MooToolsは1.2
Mootolsランクスクリプトをダウンロード （716回ダウンロード）

Firefoxで...時々、カーソルが画面上で点滅し始めていることに気付いたかもしれません。 ページ上の任意の要素をクリックしたときにそれが起こるかもしれないが、ブラウザウィンドウに等この点滅カーソル部門やイメージは実際には'キャレット·ブラウジング"と呼ばれるFireFoxのアクセシビリティ機能です。 この機能により/（私たちは通常、私たちのマウスの使用に関係する傾向がある）キーボードを使用してページ上のテキストを選択することができます。

よく！ あなたがdonotこの機能を...（あなたがそれをONしたい場合）はfalse、またはその逆に切り替えるには、単純な押して"F7"をしたい場合。 また、 "about：config"と入力することができ、アドレスバーに（ フィルタボックスに"キャレット"のタイプ）と、単に二重 "がfalseに" true "から"オプションaccessibility.browsewithcaretを "（キャレットのブラウズをオン）を変更する]をクリックします "（キャレットブラウジングがOFFにする）

私はMooToolsを使って二重固定されたスライダー（最小値と最大2つのノブ、スライダー）を探していた。 しかし、私はMo​​oToolsのフォーラムにいくつかのよくやった二重固定されたスライダーを発見した、唯一の問題はすべてのこれらのスライダのくぼみは、選択範囲のマーカーを持っているということでした。 ついに！ 私は自分自身を作成することを決めた。 よく！ 私は、元のコードを使用した、以下の私の例のように、視覚的に選択範囲が示されたスライダーの背景を持っているためにそれを変更します。 青色の領域は、選択された値の範囲を示しています。

バージョン2.2デモを見る | ダウンロードMooToolsはダブルスライダのバージョン2.2をピンでとめられた （11589回ダウンロードされる）

あなたは非常に簡単に外観を変更し、必要に応じてslider.cssを変更することにより、範囲のインジケータ（上記の例では青）、スライダーノブ、スライダトラックの感じることができます。

あなたはそれが有用見つけたら私にコメントを削除してください。

我々はテーブルセル内の一部のコンテンツを合わせて、ページレイアウトを作成するために、CSSに対処しなければならなかった直前に子供の遊びだった。 単にケーキ、お好みのアライメントを持つようにテーブルの" 整列 "または"VALIGN"プロパティを設定！
CSSレイアウトでは、我々の要素に対して"のvertical-align"プロパティたけれども、それは" 整列 "または"VALIGN"プロパティのように単純ではないようです。 もっとspecifiicになる" のvertical-align"クロスブラウザのCSSの一部を書き込みしている場合は特に、あなたの問題のいずれかを解決するように思わなかった。

HTMLテーブルを使用せずに、オブジェクトを中心の問題は、画像またはコンテナ部門内のいくつかのテキストになり、おそらくいくつかの点ですべてのUI / CSSの開発者の悪夢であった。 この問題は、さらにオブジェクトを中央揃えする場合は、合わせてのお悩みは本質的に動的で外挿し、その高さが可変であるとき、すなわち（未知の高さ）。

我々が対処しなければならないブラウザの範囲にわたって動作します既知のまっすぐ解決策はありませんが、私が到着しようとしたことの解決策は私は（IE6、IE 7でそれをしようとしたこといくつかのブラウザで動作するように見えるん。 、FF）。

解決策：
Mozillaは、OperaやSafariなどのブラウザでは、奇妙な振る舞いプロパティは単に" テーブルセル "（表示：テーブルのセル）を含有する部門の" 表示 "プロパティを設定することによって、その感覚にさせることができる" のvertical-align" 。

問題は、まだ彼らはそれを無視して、まだそのまま" テーブルセル "プロパティと無知で何に理解していないようだ誰が、ブラウザのIEの家族と一緒に残ります。 物事が起こるようにするあなたのHTMLに簡単に、広告がさらにいくつかのDOM要素も、下記のソリューションを提供します。

CSSとHTMLは次のようになります。
.outer_container {
display: table;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

HTML： -
<div class="outer_container">
<div class="obj_container">
<div class="obj"> <img src="image1.jpg"/>ビュー。<BR/>：3456 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを表示する | ダウンロードソースファイル （451回ダウンロード）

TOPは、CSSを合わせ
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

HTML： -
<div class="outer_container">
<div class="obj_container_top">
<div class="obj_top"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

BOTTOMは、CSSを合わせ
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML： -
<div class="outer_container">
<div class="obj_container_bottom">
<div class="obj_bottom"> <img src="image1.jpg"/>ビュー。<BR/>：1234 </ DIV>
</ DIV>
</ DIV>

結果は次のようになります： -

ここでデモを見る | ここからダウンロード

私はこのアライメント問題に対する合理的な解決策を見つけることをしようとしていたので、年齢のように思える。 しかし、今、このソリューションで、私は少し平和に感じる。

そのいつか希望をもって

• CSSの垂直整列プロパティは、ブッシュの周りに多くを打つことなく、それは表のセルの内側にないように動作します
• 少なくとも、マージントップ：オートとマージン底：autoは、マージンと左マージン、右セットの自動への場合と同じ結果として得られます
• ブラウザ戦争はいつの日か以上になります。
• ALLのためだけのブラウザがあります。

ここで上記の溶液のCSSとHTMLをダウンロード （451回ダウンロード）..わかりやすさのために、CSSが最適化されていません

PS：ところで、それらは、私がクリックしたいくつかの写真のサムネイルは...