html - 多行内联 block 元素占用剩余宽度但不超过

Question

我有一个假的复选框来根据应用程序风格指南来设置它的样式。

<label>
    <input type="checkbox" />
    <span class="fake-checkbox"></span>
    <span class="actual-label">
        ...
    </span>
</label>

我将 SPAN 的输入和样式都隐藏为 inline-block。只要复选框标签足够窄以适合单行，这就很好用。当标签文本太长而无法容纳一行时，问题会变得很明显，在该行中它会换行，并在行中单独保留复选框。

如果我设置 label { white-space: nowrap; } 和 .actual-label { white-space: normal; }，然后复选框和文本保持在同一行，实际的标签文本确实分成多行，但它有 100% 的内容宽度而不是更少的假复选框。

我的复选框必须允许在同一行或同一列中定位多个……就像常规复选框一样。这只是意味着排除了 float 。

Flexbox 做到了

我可以通过使用 flexbox 实现我想要的，但不幸的是我需要支持没有 flexbox 的旧浏览器。

问题

我有什么方法可以使多行实际标签 span 占用所有剩余宽度并分成几行。我不能使用的东西:

• flex 盒子
• 花车

我创建了 a Plnkr example同一控件显示两次。首先是有问题的形式，其次是它应该显示的方式。第二个控件使用我无法使用的 flexbox 设置样式。

label {
  display: inline-block;
  outline: 1px solid rgba(0, 0, 0, 0.25);
  white-space: nowrap;
  font-size: 0;
}
label * {
  white-space: normal;
  font-size: initial;
}
label .fake-checkbox {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: top;
  box-sizing: border-box;
}
label .fake-checkbox:before {
  content: "";
  display: inline-block;
}
label .actual-label {
  display: inline-block;
  vertical-align: top;
  outline: 1px solid rgba(0, 0, 0, 0.25);
}
section {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-content: flex-end;
  align-items: flex-start;
  outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
  flex-shrink: 0;
  flex-grow: 0;
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 8px;
  box-sizing: border-box;
}
section .actual-label {
  outline: 1px solid rgba(0, 0, 0, 0.25);
}

<label>
  <span class="fake-checkbox"></span>
  <span class="actual-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
  </span>
</label>
<br/>
<br/>
<section>
  <span class="fake-checkbox"></span>
  <span class="actual-label">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
  </span>
</section>

Answer 1

CSS 表格

Support回到IE8就好了

section {
  display: table;
  outline: 1px solid rgba(0, 0, 0, 0.25);
}
section .fake-checkbox {
  display: table-cell;
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #ccc;
  border-radius: 2px;
  margin-right: 8px;
  box-sizing: border-box;
}
section .actual-label {
  display: table-cell;
  outline: 1px solid rgba(0, 0, 0, 0.25);
}

<section>
  <span class="fake-checkbox"></span>
  <span class="actual-label">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in nunc porta, congue purus ut, pharetra purus. Donec vitae sem viverra, iaculis ante ac, feugiat massa. Sed vitae ultrices dui, porttitor rutrum metus. Donec feugiat porta nisi, sit amet elementum nunc interdum eu. Curabitur aliquet ipsum molestie, rutrum neque nec, tincidunt odio. Vestibulum eget malesuada lorem. Pellentesque et lobortis augue, vel hendrerit nulla. Sed augue sapien, fringilla sit amet justo id, mollis congue massa. Praesent vitae turpis ac neque tincidunt dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur consequat scelerisque nibh ac cursus.
      </span>
</section>