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>

Link to sourcebox

Answer 1

使用 EM 进行相对填充。

<强> Sourcebox

我刚刚将padding-right:1.15em添加到.size-maker

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

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

在这种情况下，1.15em将是20px（font-size）的115％。

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

1 个答案: