【发布时间】：2014-09-17 15:05:36
【问题描述】：
在使用 CSS 表格布局时，我想使用负边距导致相邻表格单元格溢出。
更新 3 - 这是我想要的，但没有明确指定绿框宽度：
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="display: table; margin-left: 300px;">
<div style="display: table-row;">
<!--Hack: width: 250px;-->
<div style="display: table-cell; background-color: green; height: 30px; overflow-x: visible; width: 250px;"></div>
<div style="display: table-cell; background-color: gray; height: 30px;">
<div style="position: relative; width: 100%; background-color: azure;">
<div style="position: relative; width: 500px; margin-left: -250px; background-color: yellow; height: 5px;"></div>
</div>
</div>
</div>
</div>
</body>
</html>
更新 2
@Per Salbark - 情况相当简单。黄色框由用户设计，而 grin 和灰色框是“框架”部分。黄色框的中心必须与第一个单元格的右边缘对齐。绿色和灰色框的宽度必须相同并且等于黄色框宽度/2。 （请注意，我在绿色单元格中添加了一个 ? 标记只是为了确保它可见，否则它应该是空白的）。
这里的关键点是，当人们为他们的黄色框设置样式时，他们不需要知道绿色框也需要设置样式，因为负边距不起作用。
更新 1 -
问：我为什么需要它？
A：我正在努力使我的布局尽可能动态。绿色单元格包含未知宽度的东西，黄色框宽度也是可变的。我必须完整地展示他们的内容。我原以为主 div（表格）会溢出并使用第一个单元格自行扩展，但没有发生。
http://jsbin.com/koqefomevulu/1/edit?html,output
<div style="display: table; margin-left: 300px;">
<div style="display: table-row;">
<div style="display: table-cell; background-color: green; overflow-x: visible;
height: 30px">
?
</div>
<div style="display: table-cell; background-color: gray; height: 30px;">
<div style="position: relative; width: 100%; background-color: azure;">
<div style="position: relative; width: 500px;
margin-left: -250px; background-color: yellow; height: 5px;">
</div>
</div>
</div>
</div>
</div>
基本上我希望绿色单元格扩大250px 以完全适合黄色框 - 想知道是否有可能实现它？
【问题讨论】：
-
这肯定是一个棘手的问题......可能更好地解释你想要实现的目标并寻找替代解决方案
-
HTML结构可以改吗？
-
@misterManSam 可以。
-
好的。好吧，我现在可以告诉你，纯 CSS 不会发生这种情况。绿色和黄色元素的 DOM 关系不容易用 CSS 定位，负边距也无济于事 :) 所以这让我怀疑这是否是正确的方法。我要求查看您目标的屏幕截图，以便一起提出不同的方法。如果你真的想解决这个问题，并且可以以任何方式更改 HTML 和 CSS，我想我可以帮助你。但并非没有看到具有正确内容的预期最终结果的示例。
-
是的，我还是不明白。对不起。也许别人会明白……