左右に並んだ写真のブロック

挑戦する

それで、レイアウトがあなたにやって来て、その中に（ああ恐ろしい！）デザイナーの写真のブロックが慎重に両側に配置されます。 このようなもの：

まあ、レイアウトではゴムだけです！

次の2つのオプションがあります。
整列せずに行うと、設計者は両側に整列することは不可能であると言うことができます、または

必要に応じて作成します。

だからアイデア

5つの写真がある場合、実際には、それらの間の4つの等しい距離を見つける必要があります。
しかし、それらの4つが幅の1/4のブロックに包まれていて、5つ目がブロックから引き出され、その周りに流れが与えられたらどうなるでしょうか？

怖いので、図を示します。

絵からも明らかでない場合、誰もコードよりも良いとは言えません）

少し気を散らす

写真のリストは、多くの場合、順序付けられていないリストから作成されます（これが最も正しいと思います）。
しかし、HTML4、XHTML1.0、および同じHTML5のスキームによると、UL（およびOL）内の有効な要素はLI要素のみであるため、li-divをグループ化することはできません。

したがって、HTML5でそれを行いますが、section-articleの要素で:)（HTML-5で何かを作成したいとずっと思っていました）
一般に、この方法はどの回路でも同じように機能します。ULの使用を拒否し、すべてのdivを構築するだけです。

コード、スタジオへ！

HTML5：

<! DOCTYPE html >

< html >
< head >
< meta http-equiv ="Content-Type" content ="text/html; charset=utf-8" />
< meta name ="language" content ="ru" />
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
<![endif]-->

< title > — ! </ title >
</ head >
< body >

< header >< h1 > </ h1 ></ header >

< section class ="images" >
< article >< img src ="1.png" alt ="" /></ article >
< section >
< article >< img src ="2.png" alt ="" /></ article >
< article >< img src ="3.png" alt ="" /></ article >
< article >< img src ="4.png" alt ="" /></ article >
< article >< img src ="5.png" alt ="" /></ article >
</ section >
</ section >

< footer > , internet explorer 6-7-8, firefox 1-2-3, opera, chrome 2, safari 3 </ footer >

</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

今CSS：

header, section, article, footer {
display: block;
}

header, footer {
margin: 10px 20px;
padding: 20px;
}

.images {
width: 75%;
margin: 20px;
padding: 20px;
background: #f5f5f5;
}
.images article {
float: left;
}
.images section {
overflow: hidden;
zoom: 1;
}
.images section article {
width: 25%;
// margin-left: -2px; /*- 7, -, , :)*/
text-align: right;
}

* This source code was highlighted with Source Code Highlighter .

好奇心が強い

1. Internet Explorer 7には常にピクセルがありません。 そして第六-2。 まあ、6番目ですべてが明確な場合（偶数距離に対する彼の渇望を覚えています）、なぜこれが7番目に起こっているのですか-暗闇に覆われた謎。
2. このため、最初は25％の代わりに24.9％を作成するというアイデアがありました。 これは、負のインデントについて思い出しました。 しかし、オペラは私を心から打ちました。 彼女は非整数の割合を理解していないことが判明しました（24.9％は24％と理解しています-これは重要です）。 彼女は、動物園全体からの唯一のものです。

結論

おそらく誰かがこれを既に使用しているかもしれませんが、私はこの方法を説明する記事を見ていません。 （そうだね、悪い）

この方法の明確な利点は次のとおりです。

1. ウェブにとってはかなり面白く、ハックされたトリックはありません
2. シンプルな実装、ブラウザ間の互換性（インターネットエクスプローラー6-7-8、firefox 1-2-3、オペラ、クロム2、サファリ）
3. 豊富な数のハックの欠如（1つのハックが使用されます）、式とJavaScriptコードの完全な欠如（そのjsはHTML5を指し、メソッドには影響しません）

ただし、欠点もあります。

1. ロジックを1次元のul-liリストに入れることはできません
2. 悪いセマンティクス

ご清聴ありがとうございました。
PS。 以下に例を示します。 ホスティングについておaび申し上げますが、これまでのところサーバーに問題があります（
きれいなコードを見るために、 ここにアーカイバがあります

UPD。 私はよく見えませんでした、行商人は言います：
記事
画像例
ブロックの例
Chrisのさまざまな実装の例（非動作例を含む）