2

達成する必要があるレイアウトは次のとおりです。

   1               2                 3                                  4
____________________________________________                    ________________
|     |                         |          |                    |              |
|  *  |  Potentially Long Text  |  ******  |                    |  **********  |
|_____|_________________________|__________|                    |______________|

要素 2 のテキストが長くなりすぎて 3 が 4 にぶつかった場合、テキストを切り捨てて省略記号を追加する必要があります。要素の内容や要素自体がラップされることはありません。

最初に各要素を作成しようとしinline-blockましたが、それでは 4 が右にくっつきません。右にフローティングすると、コンテナーのサイズが十分に小さく変更されたときに、行の残りの下に折り返されます。むしろ、要素 2 を小さくする必要があります。

次に、テーブルでこれを実行しようとしましたが、(最大) 幅をハードコーディングして 2 のテキストを切り捨てることができません。( http://jsfiddle.net/W7QLj/1/を参照)

基本的に、2 はすべてのテキストを含めるのに必要なだけ小さくする必要があり、4 は右側に固定する必要があり、2 と 3 の間にスペースがあってはならず、スペースがなくなった場合は 2 が小さくなって全員に収まるようにする必要があります。要素 4 の幅は可変です。

必要な動作を得るための戦略を誰かが提案できますか? 必要に応じて、javascript を投入する準備ができています。

4

1 に答える 1

-1

gridを使用することをお勧めします。私はすぐにCris Coyiersのことを考えました：「グリッドについて考えすぎないでください」. 参照: http://css-tricks.com/dont-overthink-it-grids/

<div class="grid"> 
  <div class="col-1-4">
    <div class="module">
      <h3>box1</h3>
    </div>
  </div>

  <div class="col-1-4">
   ....
</div>

彼のコードを使用して、次のようにしました: http://jsfiddle.net/W7QLj/74/

box2 にさらにテキストを追加してみてください。必要なものがすべて含まれているわけではないため、これが役立つことを願っています:)

于 2013-08-28T23:38:04.233 に答える