html - 将标签和表格并排放置，标签宽度固定，表格占据剩余的 100%？

Question

我知道有大量的 CSS 并排定位问题，但我有一个独特的场景，我还没有看到任何有效的答案。

我无法更改以下 HTML block :

<div class="outer">
    <div class="inner">
        <label>...</label>
        <table>...</table>
    </div>
</div>

“外部”div 具有固定宽度，可以在运行时更改。 “内部”div 可以重复任意次数，宽度为 100%。

我需要每个 <label>元素占用固定宽度150px，带<table>元素占用剩余空间(即 100% 的剩余空间)。

无论我如何尝试使元素 float 等，我都无法使其正常工作。此外，此应用程序只能在装有最新版本的 Chrome/Firefox 的机器上使用，因此 IE 的向后兼容性不是问题。

谢谢!

Answer 1

您可以在 .inner 左侧添加一个填充，然后将 label 负边距放回该空间。

像这样:

.inner {
  padding-left: 150px;
}

label {
  width: 150px;
  margin-left: -150px;
  float: left;
}

table {
  width: 100%;
  border: 1px solid #000;
}

http://jsbin.com/IdayeTOp/1/edit