0

それぞれの幅を予測できず、インラインで表示する必要がある 2 つの div があります。

<div id="container">
  <div id="left">Primary variable content</div>
  <div id="right">variable content</div>
</div>

現時点での CSS は次のとおりです。

  #left, #right{
    display:inline-block;
   }

私は欲しい

  1. #right は親 #container の端に右揃えにします
  2. #left で残りのスペースを埋めます。

したがって、#right のすべてのコンテンツが表示され、続いて #left にはそのコンテンツを表示するための残りのスペースがあります。オーバーフローはクリップできます。

要件 2 の達成に役立たないため、ここでは float:right を使用できません。コンテンツの幅がわかりません。

JS Fiddle の現在の状況はこちら - http://jsfiddle.net/chandika/fVkzV/2/

何か案は？

4

1 に答える 1

0

HTML の div の順序を逆にすることができれば簡単です。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<style media="all">
#container{
    border: 1px solid;
    padding: 2px;
}
#left{
    border: 1px solid #99CC00;
    overflow: hidden;
}

#right{
    display:inline-block;
    text-align: right;
    float: right;
    border: 1px solid #FFCC00
}
</style>

</head>
<body>

<div id="container">
    <div id="right">content, content</div>    
    <div id="left">some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here some content here </div>

</div>

</body>
</html>
于 2013-05-01T03:31:48.553 に答える