1

ページが次のようになるように三角形のフロートを作成する方法はありますか？

            This is a sampe
        Page that has a 
    Triangle left float
That looks kind of cool.

理論的には、内部のコンテンツは自然に変化するので、実際の単語や説明が入ったときにコンテンツを配置する場所に影響を与えないように、「自動」の方法でそれを行うことをお勧めします。HTML / CSS / JSの組み合わせを自由に使用できますが、シンプルな方が良いです=）

それが役に立ったら、もともと私はさまざまな長さのdivを左にフロートさせて左にクリアに配置しようとしましたが、当然、テキストを配置すると、すべての後に来て、右にフロートすることはできませんでした。

4

2 に答える 2

1

アイデアは次のとおりです。いくつかのフローティングブロックを隣り合わせに配置します。各ブロックは次の行よりも1行高くなります。これにより、（透明な）三角形のブロックが作成されます。

body {line-height:1.2em}
.blk1 {float:left; width:10px; height:6.0em}
.blk2 {float:left; width:10px; height:4.8em}
.blk3 {float:left; width:10px; height:3.6em}
.blk4 {float:left; width:10px; height:2.4em}
.blk5 {float:left; width:10px; height:1.2em}

そして、HTMLは

<div class="blk1"></div>
<div class="blk2"></div>
<div class="blk3"></div>
<div class="blk4"></div>
<div class="blk5"></div>
<div>Your text here.</div>

例jsFiddle。あなたはそれで働くことができますか？

于 2012-04-08T13:23:30.443 に答える
0

この種のレイアウトは、 CSS 除外モジュールと形状モジュールがブラウザーに実装されると、はるかに簡単になります (Chrome カナリア ビルドが初期サポートを示すようです)。

于 2012-04-08T13:29:21.850 に答える