位置:绝对和父母身高?

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

代码如下:

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。

如果我明白你想要做的是正确的,那么我不认为这是可能的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; } 

这是一个迟到的答案,但通过查看源代码,我注意到,当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; } 

我希望它有帮助。

这是我的解决方法,
在你的例子中,你可以添加第三个具有.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; } 

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

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

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

 .bar{ position: relative; }