html - 如何强制 div 跨越 100% 的可用高度和宽度

Question

我有以下模板:

<div>
    <div style="display:inline-block;background-color:#ccc;">
        Data
    </div>
    <div style="display:inline-block;background-color:#ccc;width:80px;">
        <span>Work: 22</span>
        <span>Todos: 33</span>  
    </div>  
</div>

但是第一个嵌套的 div 并没有跨越它可用的所有高度。这样两个 div 的高度就匹配了。

此外，我想强制文本数据位于左上角。

如何做同样的事情？

Answer 1

.warp{
    display: flex;
}

<div class="warp">
    <div style="background-color:#ccc;">
        Data
    </div>
    <div style="background-color:#ccc;width:80px;">
        <span>Work: 22</span>
        <span>Todos: 33</span>  
    </div>  
</div>

如果你想在这些 div 之间留出空间:
使用 margin-right

    .warp{
        display: flex;
    }
    .data{
        margin-right: 7px;
    }

    <div class="warp">
        <div style="background-color:#ccc;" class="data">
            Data
        </div>
        <div style="background-color:#ccc;width:80px;">
            <span>Work: 22</span>
            <span>Todos: 33</span>  
        </div>  
    </div>