31

1 つのブロックが利用可能なすべてのスペースを占有し、他のブロックがコンテンツに合わせて縮小する水平レイアウトを作成する必要があります。

例えば： 

<div class="grid">
    <div class="expand">Long text label</div>
    <div class="shrink">Button</div>
</div>

2 行のより複雑な例 (実際のグリッド):

<div class="grid">
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
    <div class="row">
        <div class="shrink">...</div>
        <div class="expand">...</div>
        <div class="shrink">...</div>
        <div class="shrink">...</div>
    </div>
</div>

私の要件:

  1. 大きなブロックは、たとえ短くても、使用可能なすべてのスペースを埋める必要があります
  2. 小さなブロックはコンテンツに収まる必要があります
  3. 大きなブロック (通常はテキスト ラベル) は、使用可能なスペースよりも 1 単語大きい場合があるため、この場合は切り詰める必要があります。
  4. マルチワードの場合、大きなブロックは折り返されるべきではありません
  5. 小さなブロックは折り返すべきではありません (ただし、複数のボタンまたはアイコンの場合は、コンポーネントごとに 1 つのブロックを作成することで解決できます)。
  6. 複数の行をサポートします (つまり、列を揃える必要があります)。

AndroidとiOSのスマートフォンをターゲットにしています。

この回答のコードを適応させようとしましたが、複数の行で機能させることができませんでした。また、ソース コードは順不同である必要があり、混乱を招きます (ただし、私のユース ケースではブロックされません)。ここに jsfiddle があります: http://jsfiddle.net/k3W8L/

4

3 に答える 3

2

簡潔な例を作成しようとしているときに、自分の質問に対する答えを見つけました。

テーブルレイアウトを利用します： 

.grid {
    display: table;
    table-layout: auto;
    width: 100%;
}
.row {
    display: table-row;
}
.expand {
    display: table-cell;
    width: 100%;
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shrink {
    display: table-cell;
    white-space: nowrap;
}

width: 100%inは、ブロックが利用可能なすべての.expandスペースを埋め、最初の 2 つの要件を満たします。

widthin は.grid単にグリッド全体の幅を設定するだけで、ここでは任意の値を使用できることに注意してください。

何らかの理由で、ブロックが利用可能なスペースよりも大きくなるのを防ぎmax-width: 0ます。私は偶然これを発見しましたが、なぜそれが機能するのかわかりません。.expand100px

ここに jsfiddle があります: http://jsfiddle.net/fr253/

この回答は、私が始めるのに役立ちました。

于 2013-11-07T23:17:49.683 に答える