Question

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

我坚持使用以下HTML块，我无法更改：

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

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

我需要让每个<label>元素占用固定宽度150px，其余<table>元素占用剩余空间（即剩余空间的100％）。

无论我如何尝试浮动元素等，我都无法让它正常工作。此外，此应用程序仅用于具有最新版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

将标签和桌子并排放置，标签是固定宽度，桌子占用剩余的100％？

1 个答案: