12

一定幅のアイテムを含む動的幅コンテナー div があります。コンテナのサイズを変更して、アイテム全体のみを表示し、右側のアイテムをバラバラに切断しないようにしたいと考えています。

JSFiddle

たとえば、ユーザーの画面は次の 5 つのアイテムを表示するようにレンダリングされる場合があります。

ここに画像の説明を入力

そのユーザーが画面の幅を縮小し始めた場合、バーが 5 つの完全なアイテムを保持するのに十分な幅ではなくなるとすぐに、4 つのアイテムのみを表示するように縮小したいと考えています。

悪い：

ここに画像の説明を入力

良い：

ここに画像の説明を入力

CSS3 メディア クエリを使用することでこれを実現できることはわかっていますが、要素の数ごとに異なるブレークポイントを作成することは避けたいと考えています。resizeまた、javascriptイベント ハンドラーの使用を避けたいと思いますが、それなしでこれが可能かどうかはわかりません。

4

4 に答える 4

4

削除する：

white-space: nowrap;

.itemBar から

そして追加

text-align:justify;

.itemContainer へ

このようにして、そこに収まらない他のアイテムは次の行に落ちますが、スペースは均等に分配されます。

デモ: http://jsfiddle.net/rDxRt/4/

于 2013-09-24T18:53:12.247 に答える
3

コンテナ内のアイテムを浮かせることができます。このようにして、コンテナーが小さくなった場合に、次の行にフロートします。

運が良ければアイテムの高さが分かっている場合は、コンテナーを固定の高さに設定しoverflow: hiddenて、次の行に流れるアイテムが表示されないようにすることができます。

jsfiddle の例

于 2013-09-20T19:43:38.823 に答える
0

ScottS のソリューションよりも少し単純な別のソリューションを次に示します。::beforeまたはの配置や使用を必要とせず、代わりに最後の表示項目を超えて伸びない::afterという事実に依存しています。::first-line

マークアップ

<div class="itemContainer">
  <div class="item">1</div><div
  class="item">2</div><div
  class="item">3</div><div
  class="item">4</div><div
  class="item">5</div><div 
  class="item">6</div><div 
  class="item">7</div><div 
  class="item">8</div><div 
  class="item">9</div><div 
  class="item">10</div>
</div>

このソリューションは要素間の空白に敏感であるため、連続する.itemの間の改行/スペースを削除する必要があることに注意してください。上記のタグ名とクラスの間を改行して、読みやすくしました。

CSS

.itemContainer {
    overflow: hidden;
    height: 70px; /* .item's offset height + margin */
    /* you can constrain the width of this any way you like */
}
.itemContainer::first-line {
    font-size: 70px; /* needs to be at least as big as .wrap height */
    line-height: 0px; /* fixes oddities in Firefox */
    background: black; /* "border" color */
}
.item {
    display: inline-block;
    vertical-align: text-top; /* this minimizes the font-size required  above */
    margin: 10px; /* include desired "border" size of .itemContainer */
    box-shadow: 0 0 0 9px white; /* spread = desired margin */
    background: white; /* needs an opaque background */
    /* reset font-size and line-height */
    font-size: 1rem;
    line-height: 1.5;
    /* set your item size and borders however you like */       
    height: 50px;
    width: 50px;
    border: 1px solid red;
    box-sizing: border-box;
}
.item::first-line {
    font-size: 1rem; /* fix IE precedence */
}
.item + .item {
    margin-left: 0; /* inline-block margins don't collapse */
}

結果

10 項目中 8 項目のみに収まるように制限された Safari のスクリーンショット

Safari、Chrome、Firefox、IE 11 でテスト済み。

于 2016-08-28T05:33:46.460 に答える