如何强制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>

Answer 2

只需将display: flex设为父div

即可

＆＃13;

＆＃13;

<div style="display: flex;">
        <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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

假设您仍然需要两个div之间的空格：

.container {
  display: flex;
}

.data {
  background-color: #ccc;
  width: 40px;
  padding-left: 2px;
  margin-right: 5px;
}

.input {
  background-color: #ccc;
  width: 80px;
  padding-left: 2px;
}

<div class="container">
  <div class="data">
    Data
  </div>
  <div class="input">
    <span>Work: 22</span>
    <span>Todos: 33</span>
  </div>
</div>

Answer 4

以下是您需要做的更改：

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

Answer 5

如果您不想修复高度，或使用flex - 表可以帮助您

<div style="display: table; ">
    <div style="display:table-cell;background-color:#ccc; vertical-align: middle;">
        Data
    </div>
    <div style="display:table-cell;background-color:#ccc;width:80px; vertical-align: middle;">
        <span>Work: 22</span>
        <span>Todos: 33</span>  
    </div>  
</div>

Answer 6

您可以尝试此代码：

.parent {
  display: table;
}
.parent .child {
  display: table-cell;
  vertical-align: text-top;
  background: #ccc;
  border-left: 2px solid #fff;
}
.parent .child span { display: block; }

<div class="parent">
        <div class="child">
            Data
        </div>
        <div class="child">
            <span>Work: 22</span>
            <span>Todos: 33</span>  
        </div>  
    </div>