Положение: абсолютная и родительская высота?

у меня есть некоторые контейнеры, и их дети находятся только в абсолютном / относительном положении. Как установить высоту контейнеров, чтобы их дети были внутри них?

вот код:

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 для контейнеров.

4 61
html css height absolute-path cursor-position

4 ответа:

если я понимаю, что вы пытаетесь сделать правильно, то я не думаю, что это возможно с 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;
}
65

вот мой обходной,
В вашем примере вы можете добавить третий элемент с "стили" of .один. & два элемента, но без абсолютного положения и со скрытой видимостью:

HTML

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

CSS

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

это поздний ответ, но, глядя на исходный код, я заметил, что когда видео полноэкранное, класс "mejs-container-fullscreen" добавляется к элементу "mejs-container". Таким образом, можно изменить стиль на основе этого класса.

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

кроме того, если вы хотите сделать свой MediaElement video fluid с помощью CSS, ниже приведен отличный трюк Криса Койера: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;
}

Я надеюсь, что это помогает.

2

Это еще один поздний ответ, но я выяснил довольно простой способ размещения текста "бар" между четырьмя квадратами. Вот изменения, которые я сделал; В разделе bar я обернул текст " bar " в центр и теги div.

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

и в разделе CSS я создал класс "bar", который используется в теге div выше. После добавления этого текст панели был центрирован между четырьмя цветными блоками.

.bar{
    position: relative;
}
-14