Html 动态高度容器中的图像宽度不影响容器宽度

我有一个带有文本的

div

，我想在文本后面的右侧创建一个正方形空间

我不能只将固定的

填充设置为正确的
，因为我想让它适用于任何文本大小

这就是我所拥有的：

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

使用EM作为相对填充


我刚刚在
中添加了
右填充：1.15em

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

其中1em=元素或父元素字体大小的100%

在这种情况下，1.15em将是20px（字体大小）的115%。
将表和div的标记保持在当前的特定顺序是否重要？&你所说的黑色方框应该在蓝色内是什么意思？请在这里添加有意义的代码和问题描述。不要只链接到需要修复的站点——否则，一旦问题解决，这个问题将对未来的访问者失去任何价值。发布一个能证明你的问题的帖子会帮助你得到更好的答案。有关更多信息，请参阅“谢谢！”！非常感谢。em的
em
实现了我用这个函数创建jQuery插件的技巧