0

1 行 2 列のレイアウトを作成する必要があります。最初の列は、1 行のレイアウトに収まるように切り捨てられた、潜在的に長い文字列を表示する必要があります。自動的に展開するブロックを作成する方法と同様に、次のことを行いました。

HTML:

<div class="container">
  <div class="left">Lengthy string</div>
  <div class="right">Short</div>
</div>

CSS:

.container {
  white-space: nowrap;
  overflow: hidden;
}

.left {
  overflow: hidden;
}

.right {
  float: right;
}

このソリューションとは対照的に、右の列を右端ではなく、左の列のコンテンツのすぐ後ろに配置したいと思います。

これを行う方法はありますか？

編集：

「すぐ後ろ」の意味を明確にする例:

「長い紐」はオンライン ショップのカテゴリである場合があり、「短い」はこのカテゴリで入手可能な商品の数である場合があります。カテゴリ名 + 番号はコンテナの幅よりも広い場合があるため、カテゴリ名を切り詰める必要がある場合があります。

<div class="container">
  <div class="left">Electronic equipment for consumer</div>
  <div class="right">(599)</div>
</div>

としてレンダリングする必要があります

Eletronic equipment... (599)

すぐ後ろにあるということは、「本」などの短いカテゴリ名の場合、次のようになります。

Books (29)

そして好きではない

Books             (29)
4

3 に答える 3

1

私はあなたが「すぐ後ろに」という意味を理解しているとは確信していませんが、これはあなたが求めているものかもしれないと思います:

.left {
   overflow: hidden;
   display: inline;
 }

 .right {
   float: right;
   display: inline;
 }

を<div>インラインにすると、フロートが不要になり、一般的に作業が楽になります。

于 2013-01-07T15:36:54.353 に答える
0

以下の CSS は、1 行 2 列のレイアウトを作成します。

#wrapper { display: table }
#wrapper > div { display: table-cell; }
#wrapper > div:first-child { min-width: 200px; /*Using min-width allows expantion */ }
#wrapper > div:last-child { min-width: 200px; }
#wrapper > div p { white-space:nowrap; } //One line text

<div id="wrapper">
  <div><!-- Left menu? --></div>
  <div><p>very long text very long text etc..</p></div>
</div>
于 2013-01-07T15:50:16.147 に答える
0

これを機能させるには、固定幅を割り当てるか、ブラウザがサポートしている場合は最大幅を割り当てる必要があります。

あなたが今定義した方法では、ブラウザは自由に left 要素を好きなだけ広くすることができます。

leftfloatではなく、左に float することも検討する必要がありrightます。またはdisplay: inline、両方に使用し、何も浮かせないでください。

于 2013-01-07T15:37:52.630 に答える