相关疑难解决方法(0)

我有一些容器,他们的孩子只是绝对/相对定位.如何设置容器高度,让他们的孩子在他们里面？

这是代码:

HTML

<section id="foo">
    <header>Foo</header>
    <article>
        <div class="one"></div>
        <div class="two"></div>
    </article>
</section>    

<div style="clear:both">Clear won't do.</div>
<!-- I want to have a gap between sections here -->

<section id="bar">
    <header>bar</header>
    <article>
        <div class="one"></div><div></div>
        <div class="two"></div>
    </article>
</section>  

CSS

article {
    position: relative;
}

.one {
    position: absolute;
    top: 10px;
    left: 10px;
    background: red;
    width: 30px;
    height: 30px;
}

.two {
    position: absolute;
    top: 10px;
    right: 10px;
    background: blue;
    width: 30px;
    height: 30px;
}

这是一个jsfiddle.我希望"条形"文本出现在4个方格之间,而不是它们之后.

http://jsfiddle.net/Ht9Qy/

任何简单的修复？

请注意,我不知道这些孩子的身高,我不能设置身高:容器的xxx.

我创建了一个由按钮组成的水平菜单.我需要这些按钮来调整宽度,以便它们一起占据菜单容器宽度的100%.它的行为应该与TD在TABLE中的行为相同.

因此,这是我提出的代码:

<div id="menubar">
    <div id="menu">
        <div class="button">
            <Button>Button 1</Button>
        </div>
        <div class="button">
            <Button>Button 2</Button>
        </div>
        <div class="button">
            <Button>Button 3</Button>
        </div>
        <div class="button">
            <Button>Button 4</Button>
        </div>
    </div>
</div>

和我的CSS:

#menubar {
    width: 100%;
    height: 100%;
    display: table;
    table-layout: fixed;
}

#menu {
    display: table-row;
}

#menu .button {
    position: relative;
    display: table-cell;
}

#menu .button Button {
    position: absolute;
    right: 0px;
    bottom: 0px;
    top: 0px;
    left: 0px;
}

除了Mozilla之外,这在每个浏览器中都能完美运行 Mozilla似乎并不尊重按钮类的相对位置,因此,按钮全部定位在彼此的顶部(而不是绝对在DIV中使用类"按钮").

经过一些进一步的研究,似乎这是一个已知的问题,当显示设置为"表格单元格"时,Mozilla不是各自的位置"相对".

有谁知道一项工作来实现我想要做的事情？

注意:菜单是动态的,所以我不知道会有多少个按钮,所以我不能为每个按钮提供百分比宽度.