Question

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

以下是代码：

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同时保持孩子们的绝对位置。

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

如果确实必须在将孩子保持为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;
}

Answer 2

这是我的解决方法，
在您的示例中，您可以添加第三个元素与＆＃34;相同的样式＆＃34; 的.one＆amp; .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 3

这是一个迟到的答案，但是通过查看源代码，我注意到当视频是全屏时，“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;
}

我希望它有所帮助。

Answer 4

现在可以使用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/

Answer 5

您可以使用网格来做到这一点：

article {
    display: grid;
}

.one {
    grid-area: 1 / 1 / 2 / 2;
}

.two {
    grid-area: 1 / 1 / 2 / 2;
}

Answer 6

article {
    position: relative;
   
}

//clear the float

article::after{
  content: '';
  clear: both;
  
}

.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 7

这是另一个迟到的答案，但我想出了一个相当简单的方法来放置＆＃34; bar＆＃34;四个方格之间的文字。以下是我所做的改变; 在酒吧部分，我包裹了＆＃34; bar＆＃34;中心和div标签内的文字。

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

在CSS部分我创建了一个＆＃34; bar＆＃34;在上面的div标签中使用的类。添加后，条形文本位于四个彩色块之间。

.bar{
    position: relative;
}

位置：绝对和父高？

7 个答案: