嵌入式 DIV 元素的水平定位答案

【问题标题】：Horizontal positioning of embedded DIV elements嵌入式 DIV 元素的水平定位
【发布时间】：2014-12-06 16:49:40
【问题描述】：

请帮助我用 HTML 和 CSS 设计上面的示例。说明：

每个矩形都是一个 div。
有一个黑色的容器 DIV，被 A B C D 角包围。
在容器 div 内部有两个 TIER1 div，浅灰色和深灰色。
那些 TIER1 div 本身包含子 div，它们可以包含其他子 div。
换句话说，嵌套的 div。因此：父母包含孩子。
重要：水平定位必须是绝对的；简单地将下一个 div 放在前一个旁边不是我想要的。如您所见，红色 div 不是从浅灰色 TIER1 div 的开头开始的；这是故意的。
不同的 TIER 应该有一个垂直缩进；如您所见，TIER3 在顶部有一个边距，以便父 div 可见。

我喜欢的实现方式如下：

样式表包含通用 CSS 代码； HTML 页面包含使用 'left=Xpx' 或 'margin-left:Xpx' 结合 'width=Xpx' 的每个子 DIV 的定位。
嵌套不必完美；我的代码将生成子 div，这样它们就不会超过父 div。所以实际的 HTML 代码可能只是一个容器 div 中的一堆 div；它只需要看起来像它们是嵌套的。我认为这比在 HTML 代码本身中实际嵌套 div 更容易。
DIV 使用简单的“背景=#XXX”获取颜色。

换句话说，我想玩一个“画布”并在位置 0,0 = A 和 100,100 = D 的角度绘制矩形。HTML 代码将提供这些坐标，从开始（左上角）到结束（右下）。

我一直在玩 display:table、float:left、margin-left 和其他东西，但无法让它工作。对我来说，div 元素的水平定位一直是 CSS 的一个棘手方面。但我认为这可以工作。请帮帮我，非常感谢！

【问题讨论】：

您需要提供您所尝试的代码。这不是请求某人为您编码的地方。谢谢！
好吧，我不是要求插入代码；只是关于如何达到预期结果的指针。我还在使用表格时的一些示例代码：<div id="timekeeper"> <table class="timekeeper"><tbody><tr> <td style="width:15.748%" title="procedures: 802.6 ms"></td> <td style="width:14.995%" title="readpreferences: 764.2 ms"></td> <td style="width:0.005%" title="authentication: 0.3 ms"></td> <td style="width:0.71%" title="sanitize: 36.2 ms"></td> <td style="width:24.167%" title="content: 1231.6 ms"></td> </tr></tbody></table> </div>

标签： html css positioning

【解决方案1】：

好的，我解决了这个问题，这里是任何有类似问题的人的解决方案：

<!-- container DIV uses relative position -->
<div style="position:relative">

 <!-- sub DIVs use absolute positioning and can be positioned with CSS: -->
 <div style="position:absolute; left:100px; top:10px; width:200px; background:#00f"></div>

 <!-- you can have as many DIVs as you want, and they may overlap each other, they will not push each other out of the way -->
 <div style="position:absolute; left:80px; top:20px; width:200px; background:#f00"></div>

</div>

【讨论】：