2010-05-15 12 views
3

J'ai quelques éléments flottants sur une page. Ce que je veux, c'est que le div flottant à gauche soit "au maximum" pour qu'il soit aussi large que possible sans que le div rouge ("je vais à droite") ne déborde sur le ligne suivante.Rendre l'élément flottant "au maximum large"

Un exemple est ici: La largeur: 100%; ne produit pas l'effet désiré!

** ne pas ne veut pas que l'élément vert ("je veux être aussi large que possible") passe "sous" l'élément rouge. Il est très important qu'ils restent tous les deux séparés, c'est-à-dire que je pense qu'ils doivent tous les deux être flottants!

<div class="container"> 
    <div class="a1">i go at the right</div> 
    <div class="a2">i want to be as wide as possible,</div> 

    <div class="clear"></div> 
</div> 
<style> 
div 
{ 
    border: solid 2px #000; 
    background-color: #eee; 
    margin: 8px; 
    padding: 8px; 
} 

div.a1 
{ 
    float:right; 

    background-color: #a00; 
    border: solid 2px #f00; 
    margin: 12px; 
    padding: 6px; 
} 

div.a2 
{ 
    float: left; 
    /*width: 100%;*/ /*this doens't produce desired effect!*/ 
    background-color: #0b0; 
    border: solid 2px #0f0; 
    margin: 12px; 
    padding: 14px; 
} 

.clear 
{ 
    border: none; 
    padding: 0 ; 
    margin: 0; 
    clear:both; 
} 
</style> 

Répondre

0

travail avec des pourcentages:

div.a1 
{ 
    float:right; 

    background-color: #a00; 
    border: solid 2px #f00; 
    margin: 2%px; 
    padding: 6px; 
    width: 8%; 
} 

div.a2 
{ 
    float: left; 
    width: 84%; 
    background-color: #0b0; 
    border: solid 2px #0f0; 
    margin: 2%px; 
    padding: 14px; 
} 

Jouez avec les largeurs, hauteurs et des marges% pour obtenir le look désiré. Rappelez-vous que margin: définit les marges de droite et de gauche, donc margin: 2% utilise 4% de la largeur de l'emballage. Les marges + les largeurs doivent totaliser 100%, dans ce cas (2%*2)*2 + 84% + 8% = 100%.

Questions connexes