0

小提琴

HTML

<div id="a">
    <table id="b">
        <tr><td></td></tr>
    </table>
</div>

CSS

* {
    margin: 0;
    padding: 0;
}

#a {
    background-color: yellow;
}

#b {
    background-color:red;
    height: 50px;
    margin-left: 50px;
    width: 100%;
}

我希望表格#b从其容器 ( #a) 的左侧 50px 一直延伸到#a.

通过将宽度设置为100%它会离开页面，因为它会尝试匹配#a. 如果我省略宽度，那么表格太小了。

将表格设置为display:block并删除宽度似乎可以提供所需的行为。这是可靠的，还是有另一种方法可以实现相同的目标？我不想诉诸绝对定位。

4

2 回答 2

3

您可以calc()像这样在 CSS 中使用该函数：

#b {
  width: calc(100% - 50px);
  /* your other stuff */
}

现在大多数浏览器都支持这一点。看看caniuse.com看看，哪些浏览器没有。

示例小提琴

于 2013-05-21T22:12:43.450 回答
2

一种方法是使用 box-sizing:border-box

* { -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
...
#a {
    ...
    padding-left: 50px;
}

与 Sirko 的回答不同，这适用于 IE8+ 而不是 IE9+

另一种方法是使用冲突的绝对定位

于 2013-05-21T22:38:43.220 回答