位置：绝对和父母身高？

我有一些容器，他们的孩子只有绝对/相对定位。 如何设置容器高度，以便他们的孩子将在里面？

代码如下：

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。

Answer 1

如果我明白你想要做的是正确的，那么我不认为这是可能的CSS，同时保持孩子绝对定位。

绝对定位的元素完全从文档stream中移除，因此它们的尺寸不能改变父母的尺寸。

如果你真的必须在保持孩子们的position: absolute同时达到这个效果position: absolute ，你可以通过在渲染后find绝对定位的孩子的高度，并用它来设置父母的高度来实现。

或者，只要使用float: left / float:right和margin来获得相同的定位效果，同时让子项保持在文档stream中，则可以使用overflow: hidden在父项（或任何其他clearfix技术）上，使其高度为扩展到它的孩子。

 article { position: relative; overflow: hidden; } .one { position: relative; float: left; margin-top: 10px; margin-left: 10px; background: red; width: 30px; height: 30px; } .two { position: relative; float: right; margin-top: 10px; margin-right: 10px; background: blue; width: 30px; height: 30px; } 

Answer 2

这是一个迟到的答案，但通过查看源代码，我注意到，当video是全屏时，“mejs-container-fullscreen”类被添加到“mejs-container”元素中。 因此可以根据这个类来改变样式。

 .mejs-container.mejs-container-fullscreen { // This rule applies only to the container when in fullscreen padding-top: 57%; } 

另外，如果你想使用CSS来制作MediaElementvideostream，下面是Chris Coyier的一个很棒的技巧： http : //css-tricks.com/rundown-of-handling-flexible-media/

只需将其添加到您的CSS：

 .mejs-container { width: 100% !important; height: auto !important; padding-top: 57%; } .mejs-overlay, .mejs-poster { width: 100% !important; height: 100% !important; } .mejs-mediaelement video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; } 

我希望它有帮助。

Answer 3

这是我的解决方法，
在你的例子中，你可以添加第三个具有.one＆.two元素的“相同样式”的元素，但没有绝对位置和隐藏的可见性：

HTML

 <article> <div class="one"></div> <div class="two"></div> <div class="three"></div> </article> 

CSS

 .three{ height: 30px; z-index: -1; visibility: hidden; } 

Answer 4

这是另一个迟到的答案，但我想出了一个相当简单的方法，将“酒吧”文本放在四个方块之间。 这是我做的改变。 在酒吧部分，我将“酒吧”文本包裹在一个中心和div标签中。

 <header><center><div class="bar">bar</div></center></header> 

而在CSS部分，我创build了一个“bar”类，用于上面的div标签。 在添加这个之后，条形文本被集中在四个彩色块之间。

 .bar{ position: relative; }