绝对阻止行为

Question

我有以下HTML代码段：

Block 1:
<div style="position: absolute; top: 105px; left: 15px;">
    <div style="float: left; width: 50px; height: 40px;"></div>
    <div style="float: left; width: 100px; height: 20px;"></div>
</div>

Block 2:
<div style="position: relative; width: 60px; height: 20px;">
    <div style="position: absolute; top: 15px; left: 15px;">
        <div style="float: left; width: 50px; height: 40px;"></div>
        <div style="float: left; width: 100px; height: 20px;"></div>
    </div>
</div>

块1是普通的绝对定位DIV，而在块2中，相同的DIV被包含在相对定位的DIV中。

我的问题是，在块2上，绝对DIV从其父级继承width属性，从而将子DIV呈现在彼此之上。将其与块1进行比较，其中子DIV正确并排浮动（因为指定了最大允许宽度）。

这种情况有什么问题吗？给定的高度和宽度是任意的，可以随时改变。子DIV不应设置任何宽度，因为内容不断变化（我在这里放一些用于说明目的）。我可以设置一定的宽度，但是具有不同浏览器和DPI设置的人不断得到不同的结果，所以最好保持子DIV的宽度不设置。

赏金更新：

上述HTML的预期用法类似于以下内容：

Block 2:
<div id="main" style="position: relative; width: 60px; height: 20px;">
    Main Text
    <div id="columncontainer" style="position: absolute; top: 20px; left: 0px; width: 100px;">
        <div id="leftcolumn" style="float: left;">
                Item 1: Left Column, Line 1<br />
                Item 2: Left Column, Line 2<br />
                Item 3: Left Column, Line 3<br />
        </div>
        <div id="rightcolumn"  style="float: left;">
                Item 4: Right Column, Line 1<br />
                Item 5: Right Column, Line 2<br />
        </div>
    </div>
</div>

注意：

• leftcolumn和#rightcolumn width不是静态的，因此没有可设置的特定宽度。宽度应遵循最长的文本（单行中的每个项目）。

• 我可以将#columncontainer width设置为特定宽度（我现在正在做），但如果文本太长，则左右列混乱（#leftcolumn下面的#rightcolumn，这是正确的，因为没有足够的空间。）

• 主宽度设置为特定宽度，在所有情况下都将远小于#columncontainer width。

• 我对JS解决方案持开放态度，因为这似乎是我能想到的唯一一致的解决方案。

Answer 1

在 Block 2 中，绝对定位的div不会严格地从其父级继承其宽度。如果是这种情况，将宽度设置为auto就可以了。相反，它相对定位的父母已经变成了它的“containing block”，建立了一个绝对的div存在的背景，可以这么说。

“打破”包含块的唯一方法是在其上设置宽度，使其溢出，就像你正在做的那样。如果将该宽度设置为通常足够好的值，则可以通过在其上设置（百分比）min-width和max-width值来进一步控制其中浮动的行为。

但是你真的需要#columncontainer div在#main内，而不是相对于#main的坐标来定位吗？

你可以做的是让他们成为共同父div中的兄弟姐妹（其余的CSS保持不变）：

<div style="position: relative">
    <div id="main">...</div>
    <div id="columncontainer">...</div>
</div>

Answer 2

两个内部div 50和100的宽度比封闭的60px div宽。是否有必要将封闭div设置为60px？如果删除宽度和高度限制，则内部div将根据需要彼此相邻。否则将div的宽度设置为高于60的数字，假设为110px，以便内部div具有并排的空间。

Answer 3

我认为最好的方法是用百分比来定义宽度（以像素为单位）。会发生的是，如果将每个设置为50％（或49％），它们将彼此相邻。鉴于内容可以获得的最大值是100％，给每个盒子50％应该很好，除非一方有时候应该比另一方大。

编辑：刚看到每个都需要在一行上，这意味着一方可能比另一方大，所以我的解决方案可能无法正常工作。