4

HTML/CSS で作成するデザインを与えられましたが、それは不可能かもしれませんが、敗北を認めて妥協する前に、絶対に確認したいと思います。

可変長テキストを含むいくつかのアイテムは、列が利用可能な幅全体に正確に分散される列を形成するように、2 つのセットに配置されますが、各列はその最も広いアイテムよりも幅が広くならないようにします。これにより、アイテムがグリッドとして完全に整列するようにしながら、水平方向のスペースを可能な限り効率的に使用します。この例を考えてみましょう -

[-a--] [-cccccc-] [-eee-] [-g---]
[-bb-] [-dddd---] [-ff--] [-hhh-]

おそらくこれは表形式のように見えますが、コンテナが縮小したときにアイテムもラップする必要があり、それでも列は魔法のような配置を維持していることを考慮してください -

[-a---] [-cccccc-] 
[-bb--] [-dddd---] 
[-eee-] [-g------]
[-ff--] [-hhh----]

幅の再帰的な依存関係を解決する方法がわかりません。つまり、各「列」の幅はその列の最も長いアイテムによって定義されますが、使用可能な幅の合計は既知であり、列幅の正確な合計でなければなりません。

CSS3 のみのソリューションを使用して、古いブラウザーの固定アイテム幅ソリューションにフォールバックすることに満足していますが、どの CSS プロパティがこの魔法を実現できるかについては完全に困惑しています。

ある種の出発点を提供するために、CSS3 列を使用した Codepen を次に示します: http://codepen.io/anon/pen/kiGgp

列が均等に分散されているのは良くありません。代わりに最適に分散する方法があるかどうか疑問に思っています。

4

1 に答える 1

0

FlexBox モデルを何度も試した後でも、指定した内容を達成できませんでした。(ところで: このモデルは現在、ブラウザで十分にサポートされていません)

しかし、私の努力の結果、まともな解決策が得られました。おそらく、あなたもそれを気に入るはずです。

このフィドルのデモ

要素の折り返しを許可しながら、各行の要素間のスペースを均等に分散することができました。各要素は、彼が必要とする正確な量のスペースを取得し、残りは行内のスペースとして分割されます。

ただし、要素が折り返されても、この幅は維持されます。そのため、「列のような」表示はありません。

これは純粋な CSS であり、クロス ブラウザーです。 テスト済み: IE10、IE9、IE8、Chrome、FF

HTML

<div class="wrap">
    <div class="pair">
        <p>a</p>
        <p>b</p>
    </div>
    <div class="pair">
        <p>cccccccc</p>
        <p>dddddd</p>
    </div>
    <div class="pair">
        <p>ee</p>
        <p>f</p>
    </div>
    <div class="pair">
        <p>ggggggggggg</p>
        <p>hhhhhhhhh</p>
    </div>
    <div class="pair">
        <p>iiii</p>
        <p>jjjjjj</p>
    </div>
    <div class="filler"></div>
</div>

CSS

*
{
    padding: 0;
    margin: 0;
}
.wrap
{
    background-color: #ccc;
    line-height: 0;
    text-align: justify;
}

.pair
{
    line-height: normal;
    background-color: #ddd;
    display: inline-block;
    width: auto;
}

.filler
{
    width: 100%;
    height: 0;
    font-size: 0;
    display: inline-block;
    vertical-align: top;
}
于 2013-09-16T14:04:30.707 に答える