2

インラインにしたい 2 つの div があります (左側に 1 つ、右側に 1 つ)。右側にはテキスト行が含まれています。常に1行のテキストにして、必要に応じて楕円形にしたい. テキストが長すぎると、右の div が左の div の下にジャンプするため、インライン展開を正しく行ってはいけません。例：

<!doctype>
<html>

<head>
    <style type="text/css">
    #panelLeft {
      display: inline-block;
      width: 50px;
      height: 20px;
      background-color: #f00;
    }
    #panelRight {
      display: inline-block;
      background-color: #0f0;
      /* width: 200px; */ works ok if explicitly sized
    }
    #test {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    </style>
</head>

<body>
    <div id="panelLeft">
    </div>
    <div id="panelRight">
        <div id="test">
            This is some text that's longer than usual and that I'd like to have ellipsized, and forced to a single line, always.
        </div>
    </div>
</body>      
</html>

http://jsfiddle.net/JEQPL/1/

代わりに、panelRight の幅 (残りのスペースと同じかそれよりも短い) を指定すると、div が同じ行に表示され、省略表示が正しく表示されます。panelRight の正確な幅がわからない場合、どうすればこれを機能させることができますか?

ありがとう

4

3 に答える 3

1

両方を。を使用して親Div内に配置しposition:relative;ます。

<div id="parentDiv">
    <div id="panelLeft">
    </div>
    <div id="panelRight">
         <div id="test">
         </div>
    </div>
</div>

次に、を与え#panelRightますposition:absolute;。

#parentDiv
{
    position:relative;
}
#panelRight
{
    position:absolute;
    right:0px;
    left:60px; // #panelLeft has a width of 50px, so change it the way you like.
}

それをチェックしてください：http：//jsfiddle.net/AliBassam/BpQqu/

于 2013-02-02T20:15:25.340 に答える
1

インラインブロックの代わりに、左の列をフローティングし、右の列の余白を調整して、左の列に必要なスペースを補うことを検討します。

これは、私が通常使用するテクニックのフィドルです: http://jsfiddle.net/q3rEX/

HTML:

<div class="left">Left Bar</div>
<div class="right">There is a bunch of text in here and I don't want it to jump down a line cause that stinks!</div>

そしてCSS：

.left { float: left; width: 25%; background: red; }
.right { margin-left: 25%; background: green; }

次に、テキスト ラップ防止、省略記号などを に適用して、.rightダイヤルインすることができます。

これには、一部の古いブラウザーではインライン ブロックがサポートされていないという利点もあります。

于 2013-02-02T20:11:00.330 に答える
0

この質問への回答で説明されている手法の 1 つを使用して、右側の div の幅を 100% から左側の列の幅を引いた値に設定できます: Is it possible to make a div 50px less than 100% in CSS3?

使用calc():

#panelRight {
  display: inline-block;
  background-color: #0f0;
  max-width: calc(100% - 50px);
}

http://jsfiddle.net/JEQPL/9/

または、絶対配置:

#panelRight {
  display: inline-block;
  background-color: #0f0;
  position: absolute;
  left: 50px;
  right: 0;
}

http://jsfiddle.net/JEQPL/10/

于 2013-02-02T20:14:59.057 に答える