1

いくつかの固定サイズの「前」および「後」コンテンツを持つ div コンテナーがあり、メイン コンテンツが中央に挟まれています。メイン コンテンツは基本的にラベルと番号で構成されています。これはサンプル付きのjsfiddleリンクです（コードも下にコピーされています-目に見えるコントラストのために色を追加しました）。

ワイヤーフレームのモックアップ:

------------------------------------------
| A | Variable Sized Content | 123   | B |
------------------------------------------

AおよびBは前後のコンテンツです。テキストと数値は、十分なスペースがない場合、コンテンツが縮小され、省略記号で切り捨てられるという考えで、可変サイズであることを意図しています。

---------------------------------
| A | Variable Siz... | 123 | B |
---------------------------------

十分なスペースがある場合、余分なスペースは数字と の間に入りBます:

-----------------------------------------------------
| A | Variable Sized Content | 123              | B |
-----------------------------------------------------

私が今それを機能させている方法は、クラスouterDivの を設定する Javascript でサイズ変更リスナーをオンにすることです。これはコンテンツ div の最小サイズも管理するため、さらに縮小すると数値も省略されます。 max-widthmember-text

私が抱えている問題は、Javascript を使用せずmax-widthにこれを機能させようとすることです。すべての要素を常に変更するのはかなりぎこちない/遅いです (サンプルでは 2 つのアイテムしか表示されませんが、本番環境ではこれは多くのアイテムのリストにあります)。これにより、他のウィジェットのサブコンポーネントとして使用するための構造の移植性が低下します。機能するようにリファクタリングできますが、それには時間がかかります。「より正しい」解決策は、可能な場合は CSS を使用することです。

これをシミュレートするのに最も近かったのは、100% と約85% に設定max-widthすることでした。これは、outerDiv の幅の範囲がデフォルト (230 ～ 290ish) に適しているように見えますが、それを超えるとうまくいきません (間隔が多すぎる/小さすぎる)。間違った部分で）。member-textmax-widthmember-token

編集:display: tableまた、ルート div で(およびtable-row/table-cellを使用table-layout: fixedして divを試しました。サイズ変更されたコンテンツ (テキスト) ですが、この場合は 2 つ (モックアップの数字で表されるバブル テキスト) がありますが、この戦略では動的にサイズ変更された複数の列は許可されていないようです。

これが私の質問につながります-CSSだけでこの種のことを行うことさえ可能ですか? もしそうなら、どのように？ 問題を単純化するために数値が固定幅であると仮定しても、これはJavascriptなしでは不可能のようです...

コードサンプルは次のとおりです（問題をデモするための単純化された例）

HTML: 

<div class="outerDiv">
  <div class="post-mark"></div>
  <div class="pre-mark"></div>
  <div class="member">
        <div class="member-token">
            <label class="member-text">Very Long Text Purple Monkey Dishwasher</label>
        </div>
        <div class="member-bubble">
            <span class="member-bubble-text">500</span>
        </div>
  </div>
</div>

<div class="outerDiv">
  <div class="post-mark"></div>
  <div class="pre-mark"></div>
  <div class="member">
        <div class="member-token">
            <label class="member-text">Purple Monkey Dishwasher</label>
        </div>
        <div class="member-bubble">
            <span class="member-bubble-text">500</span>
        </div>
  </div>
</div>

CSS: 

.outerDiv {
      width: 280px;
      height: 100px;
      background-color: lightgrey;
  }

  .post-mark {
      display: inline-block;
      height: 100%;
      margin-right: 8px;
      position: relative;
      width: 18px;
      float: right;
      background-color: cyan;
  }

  .pre-mark {
      height: 100%;
      margin-left: 4px;
      position: relative;
      width: 18px;
      float: left;
      background-color: pink;
  }

  .member {
      margin-left: 22px;
      height: 22px;
      overflow: hidden;
      position: relative;
      white-space: nowrap;
      background-color: cadetblue;
  }

  .member-token {
      float: left;
      height: 20px;
      margin-left: 2px;
      padding: 0 3px;
      background-color: darksalmon
  }

  .member-text {
      display: inline-block;
      line-height: 20px;
      max-width: 193px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background-color: goldenrod;
  }

  .member-bubble {
      display: block;
      height: 100%;
      overflow: hidden;
      padding: 0 4px;
      position: relative;
      background-color: burlywood
  }

  .member-bubble-text {
      top: 4px;
      -moz-box-sizing: border-box;
      background-color: #F2F2F2;
      border-radius: 3px 3px 3px 3px;
      display: inline-block;
      line-height: 14px;
      max-width: 100%;
      padding 0 4px;
      position: relative;
      vertical-align: top;
      color: #666666;
      font-size: 11px;
      font-weight: bold;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
  }
4

1 に答える 1

0

非表形式のデータでは一般的に表を避ける必要があることは知っていますが、この場合はそれが最善の策かもしれないと思います。

テーブルを使用することで、単純なHTML/CSSで目的の動作を得ることができました。
ここでの重要なトリックは、可変サイズのコンテンツセルの位置を設定することでした。相対的な位置にあり、その中で絶対的に配置されたスパンが4つのコーナーすべてに固定されて伸びます。

HTML：

<table>
<tr>
    <td class="pre">
        A
    </td>
    <td class="shrinking">
        <span>
            Very Long Text Purple Monkey Dishwasher
        </span>
    </td>
    <td class="expanding">
        <span>500</span>
        <span class="post"> B</span>
    </td>
</tr>

CSS：

table {
    background: lightgrey;
    width:300px;
}
td {
    border: 1px red solid;
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
td.pre {
    width: 25px;
    min-width: 25px;
    text-align: center;
}
td.shrinking {
    max-width: 280px;
    width: 280px;
    position: relative;
}
td.shrinking span {
    white-space:nowrap;
    display: inline-block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-overflow: ellipsis;
}
td.expanding {
    min-width: 80px;
}
.post {
    float:right;
    border: 1px red solid;
    width: 25px;
    text-align: center;
}

http://jsfiddle.net/ijoukov/xMf8L/で実際の動作を確認できます。

于 2013-02-14T03:43:53.770 に答える