divの幅をコンテンツなしでいっぱいに設定するにはどうすればよいですか？

コード：問題が午前divの幅をコンテンツなしでいっぱいに設定するにはどうすればよいですか？

<html> 
    <head> 
     <style type="text/css"> 
     div{border:solid 1px gray;} 
     #mainDiv 
     { 
      width:300px; 
     } 
     .leftDiv 
     { 
      display:table-cell; 
      width:50%; 
     } 
     .rightDiv 
     { 
      display:table-cell; 
      width:50%; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="mainDiv"> 
     <div class="titleDiv"> 
      ...titleDiv content... 
     <div> 
     <div class="leftDiv"> 
      ...leftDiv content... 
     </div> 
     <div class="rightDiv"> 
      ...rightDiv content... 
     </div> 
     </div> 
    </body> 
</html>

がそうするためにそれらに十分なコンテンツがある場合にのみ、その全幅に到達leftDivとrightDivです。

私はleftDivで1単語しか再生せず、それを右揃えにしたいので、これは問題です。

出典

2010-11-20 Babiker

あなたが使用することができます。これらのDIV用のテーブルセルを？ –

<html> 
    <head> 
     <style type="text/css"> 
     div{border:solid 1px gray;} 
     #mainDiv 
     { 
      width:300px; 
      overflow:auto; 
     } 
     .float 
     { 
      float:left; 
      width:50%; 
     } 
     </style> 
    </head> 
    <body> 
     <div id="mainDiv"> 
     <div class="titleDiv"> 
      ...titleDiv content... 
     <div> 
     <div class="float"> 
      ...leftDiv content... 
     </div> 
     <div class="float"> 
      ...rightDiv content... 
     </div> 
     </div> 
    </body> 
</html>

出典

2010-11-20 19:19:15

+1：注：境界線は浮動小数点数をフィットさせませんが、境界線を外すと解決策が機能します。 –

@セバスチャンはい。そのような状況で私の解決策は、（一般的に）浮動小数点型DIVのpx幅を定義することです。この場合は148pxになります... –

divに負のマージンを張ったり、 'box-sizing ：border-box'を入力してください。 – Eric

なぜあなたは、表示設定されている

text-align:right

出典

2010-11-20 19:19:54 kobe

divの幅をコンテンツなしでいっぱいに設定するにはどうすればよいですか？

答えて

関連する問題