2010-11-20 7 views
0

Le code:Comment définir la largeur div à plein sans contenu?

<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> 

Le problème ai est le leftDiv et rightDiv atteignent leur pleine largeur s'il y a assez de contenu en eux de le faire.

Ceci est un problème pour moi parce que je veux jouer un seul mot en leftDiv et l'aligner sur la droite.

+1

Pourquoi vous le paramètre d'affichage: table-cell pour les DIVs? –

Répondre

2
<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> 
+0

+1: note: la bordure fait que les divs flottantes ne correspondent pas, mais si vous retirez la bordure, la solution fonctionne. –

+0

@Sebastian Oui. Ma solution dans une telle situation est (généralement) de définir une largeur px sur les DIVs flottantes, ce qui serait 148px dans ce cas ... –

+0

Ou vous pouvez coller une marge négative sur les divs, ou même ajouter un 'taille de boîte : border-box' à eux. – Eric

0

vous pouvez utiliser

text-align:right 
Questions connexes