html - 如何在不使用最大宽度的情况下垂直对齐标签？

Question

这是 fiddle :https://jsfiddle.net/udyzyoq6/

• 绿框是我想要达到的效果
• 红框是失败的例子

HTML(失败示例):

<div class="parent">
  <div class="square"></div>
  <label class="label">
    Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum
  </label>
</div>

CSS(失败示例):

.parent {
    width: 300px;
    border: solid 1px red;
}

.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}

.label {
    display: inline-block;
    vertical-align: middle;
}

我不想在标签上设置 max-width - 我只是希望它自动使用 .parent (300px-15px) 的所有可用空间。在我的示例中，如果我不在标签上设置 max-width，那么长文本会破坏布局(如红框所示)。

---

编辑:除了 .parent (width=300px) 和 .square (width=15px, height= 15 像素)。我希望它自动/动态调整到 .parent 容器宽度。

Answer 1

使用显示:表格

.parent {
    width: 300px;
    border: solid 1px green;
    display: table;
}

.parent.error-frame {
    border-color: red;
}
.parent > div{
    display: table-cell;
}
.parent > div:nth-of-type(1){
    vertical-align: middle;
}
.square {
    width: 15px;
    height: 15px;
    background-color: blue;
    display: inline-block;
    vertical-align: middle;
}
.label {
    display: inline-block;
    vertical-align: middle;    
    padding-left: 5px;
}

<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>
<br>
<div class="parent">
    <div>
        <div class="square"></div>
    </div>
     <div>
         <label class="label">Long label text, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum, lorem ipsum</label>         
     </div>   
</div>