La largeur de l'image dans le conteneur à hauteur dynamique n'affecte pas la largeur du conteneur

Question

J'ai un div avec du texte, et je veux créer un espace carré sur le côté droit, après le texte.

Je ne peux pas simplement fixer un padding-right fixe parce que je veux le faire fonctionner pour n'importe quelle taille de texte.

C'est ce que j'ai:

<div class="wrapper"> 
    <table class="size-maker" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td>Hello!</td> 
      <td class="ratio-1x1"> 
       <!-- just 1x1 transparent image to maintain 1x1 aspect ratio when resized --> 
       <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=" />  
      </td> 
     </tr> 
    </table> 
    <div class="content"></div> 
</div> 

<style type="text/css"> 
    .wrapper { 
     background: #0055cc; 
     position: relative; 
     display: inline-block; 
    } 

    .size-maker { 
     font-size: 20px; 
     color: white; 
    } 

    .size-maker .ratio-1x1 { 
     height: 100%; /* need for FireFox */ 
    } 
    .size-maker .ratio-1x1 img { 
     height: 100%; 
     background: rgba(0,0,0,0.5); 
    } 

    .content { 
     background: #00DD00; 
     position: absolute; 
     top: 150%; 
     left: 0; 
     width: 100%; 
     height: 100%; 
    } 
</style> 

<br/><br/><br/><br/><br/> 
<h3>Task</h3> 
<p>Black square should be inside of blue, and green square should have the size of both blue+black</p> 
<p style="color: gray;"><em>This should work for any font size <b><code>.size-maker { font-size: ...px; }</code></b></em></p> 

Link to sourcebox

Answer 1

utilisation EM pour le rembourrage relatif.

Sourcebox

Je viens d'ajouter padding-right:1.15em à .size-maker

.size-maker { 
    font-size: 20px; 
    color: white; 
    padding-right: 1.15em; 
} 

Où 1em = 100% de l'élément ou la taille de la police de l'élément parent.

Dans ce scénario, 1.15em sera 115% de 20px (taille de police).