位置：绝对身高和父母身高？

我有一些容器，他们的孩子只是绝对的/相对的。如何设置容器的高度，以便他们的孩子进入其中？

这是代码：

的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保持孩子的绝对位置是不可能的。

绝对定位的元素已从文档流中完全删除，因此其尺寸不能更改其父级的尺寸。

如果确实必须在将子代保持为的同时实现这种影响，则position: absolute可以使用JavaScript通过在绘制后定位绝对子代的高度，并使用其来设置父代的高度，来确定它们的高度。

或者，只需使用float: left/ float:right和页边距即可获得相同的定位效果，同时将子级保留在文档流中，然后可以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;
}

这是我的解决方法，
在您的示例中，您可以添加第三个元素，它们具有.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;
}

这是一个较晚的答案，但是通过查看源代码，我注意到在视频全屏显示时，“ mejs-container-fullscreen”类已添加到“ mejs-container”元素中。因此，可以基于此类更改样式。

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

另外，如果您希望使用CSS使MediaElement视频流畅，以下是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;
}

希望对您有所帮助。

现在可以使用flexbox解决这种布局问题，而无需知道高度或通过绝对定位或浮动来控制布局。OP的主要问题是如何让父母容纳身高未知的孩子，他们想在一定的布局内做到这一点。将父容器的高度设置为“适合内容”即可；使用“ display：flex”和“ justify-content：space-between”会产生我认为OP试图创建的节/列布局。

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

<div style="clear:both">Clear won't do.</div>

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

* { text-align: center; }
article {
    height: fit-content ;
    display: flex;
    justify-content: space-between;
    background: whitesmoke;
}
article div { 
    background: yellow;     
    margin:20px;
    width: 30px;
    height: 30px;
    }

.one {
    background: red;
}

.two {
    background: blue;
}

我修改了OP的提琴：http : //jsfiddle.net/taL4s9fj/

Flexbox上的CSS技巧：https：//css-tricks.com/snippets/css/a-guide-to-flexbox/

这是另一个较晚的答案，但我想出了一种在四个正方形之间放置“条形”文本的相当简单的方法。这是我所做的更改；在酒吧部分，我将“酒吧”文本包装在center和div标签内。

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

在CSS部分中，我创建了一个“ bar”类，该类在上面的div标签中使用。添加后，条形文字在四个彩色块之间居中。

.bar{
    position: relative;
}