代码之家 › 专栏 › 技术社区 › Adrian Godong

绝对阻塞行为

css html

Adrian Godong · 技术社区 · 16 年前

我有以下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是一个普通的绝对定位分区,而在块2中,相同的分区被封闭在相对定位分区内。

我的问题是,在块2上,absolute div从其父级继承了width属性,从而使子级div相互重叠。将其与块1进行比较,在块1中,子分隔条正确地并排浮动(因为指定了最大允许宽度)。

这种情况有什么解决办法吗?给定的高度和宽度是任意的,可以随时更改。子划分不应该设置任何宽度,因为内容不断变化(我在这里放了一些用于说明)。我可以设置一个特定的宽度,但是拥有不同浏览器和dpi设置的人会得到不同的结果,所以最好不要设置子divs的宽度。

奖励更新 :

上述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宽度不是静态的,因此没有可以设置的特定宽度。宽度应跟随最长的文本(每一行中的每一项)。
我可以将columnContainer width设置为特定宽度(我现在正在做),但是如果文本太长,那么左右列就会混乱(left column下面的right column,这是正确的,因为没有足够的空间)。
主宽度设置为特定的宽度,在所有可能的情况下都将大大小于ColumnContainer宽度。
我对JS解决方案很开放,因为这可能是我能想到的唯一一致的解决方案。

3 回复 | 直到 16 年前

mercator 16 年前

在 方块2 ,绝对定位的DIV不会严格继承其父级的宽度。如果是这样,将其宽度设置为 auto 会成功的。相反,其相对定位的母公司已经成为 containing block 可以说,建立了一个绝对师生活的环境。

要“突破”包含块的唯一方法是在其上设置一个宽度,使其溢出,就像您所做的那样。如果将该宽度设置为通常足够好的值,则可以通过设置(百分比)进一步控制其内部浮动的行为。 min-width 和 max-width 他们的价值观。

但是你真的需要 #columncontainer DIV在里面 #main ,而不是相对于 第二主 坐标?

您可以做的是使它们成为一个公共父级DIV中的兄弟(CSS的其余部分保持不变):

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

Vincent Ramdhanie 16 年前

两个内部分隔符50和100的宽度比封闭的60px分隔符宽。是否需要将封闭分隔符设置为60px?如果取消宽度和高度限制,则内部分隔将根据需要相邻出现。否则,将DIV的宽度设置为大于60的数字,比如说110px,这样内部的DIV就有了并排的空间。

Tyler Carter 16 年前

我认为最好的方法不是用像素来定义宽度,而是用百分比来定义宽度。如果将每个设置为50%(或49%),它们将彼此相邻。考虑到最大的内容可以得到100%,给每个盒子50%应该很好地解决,除非一方有时比另一方大。

编辑:只是看到了这样一个事实:每一个都需要在一行上,这意味着一方可能比另一方大,所以我的解决方案可能不起作用。

绝对阻塞行为

leftcolumn和rightcolumn宽度不是静态的,因此没有可以设置的特定宽度。宽度应跟随最长的文本(每一行中的每一项)。

主宽度设置为特定的宽度,在所有可能的情况下都将大大小于ColumnContainer宽度。