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

Question

我有一个带文本的div ，我想在文本之后在右侧创建一个正方形空间。

我不能只设置固定的padding-right因为我想使它适合任何文本大小。

这就是我所拥有的：

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

链接到sourcebox

Answer 1

使用EM进行相对填充。

Sourcebox

我刚刚在padding-right:1.15em .size-maker添加了padding-right:1.15em

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

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

在这种情况下，1.15em将是20px（字体大小）的115％。