Pozisyon: mutlak ve ebeveyn yüksekliği?

Bazı kaplarım var ve çocukları yalnızca mutlak / göreceli olarak konumlandırılmış. Çocuklarının içinde olması için kapların yüksekliği nasıl ayarlanır?

İşte kod:

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;
}

İşte bir jsfiddle. "Çubuk" metninin arkalarında değil 4 kare arasında görünmesini istiyorum.

http://jsfiddle.net/Ht9Qy/

Herhangi bir kolay düzeltme var mı?

Bu çocukların boyunu bilmediğimi ve kaplar için height: xxx ayarlayamadığımı unutmayın.

Ne yapmaya çalıştığınızı doğru anlarsam, CSS ile çocukları mutlak bir şekilde konumlandırırken bunun mümkün olduğunu düşünmüyorum.

Kesinlikle konumlandırılmış öğeler belge akışından tamamen çıkarılır ve bu nedenle boyutları, üstlerinin boyutlarını değiştiremez.

Çocukları olduğu gibi tutarken bu etkiyi gerçekten elde etmek zorunda kaldıysanız position: absolute, bunu JavaScript ile kesinlikle konumlandırılmış çocukların boylarını oluşturduktan sonra bularak ve bunu ebeveynin boyunu ayarlamak için kullanarak yapabilirsiniz.

Alternatif olarak, alt öğeleri belge akışında tutarken aynı konumlandırma efektini elde etmek için float: left/ float:rightve kenar boşluklarını kullanın, daha sonra overflow: hiddenyüksekliğinin altlarınınkine kadar genişlemesini sağlamak için üst öğe üzerinde (veya başka herhangi bir düzeltme tekniğini) kullanabilirsiniz.

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;
}

İşte benim geçici çözümüm, Örneğinizde .one ve .two öğelerinin "aynı stillerine" sahip, ancak mutlak konum olmadan ve gizli görünürlükle
üçüncü bir öğe ekleyebilirsiniz :

HTML

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

CSS

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

Bu geç bir cevap, ancak kaynak koduna bakarak, video tam ekran olduğunda "mejs-container-fullscreen" sınıfının "mejs-container" öğesine eklendiğini fark ettim. Böylece stili bu sınıfa göre değiştirmek mümkündür.

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

Ayrıca, MediaElement videonuzu CSS kullanarak akıcı hale getirmek istiyorsanız, aşağıda Chris Coyier'in harika bir numarası var: http://css-tricks.com/rundown-of-handling-f Elastic-media/

Sadece bunu CSS'nize ekleyin:

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

Umut ediyorum bu yardım eder.

Bu tür bir yerleşim problemi şimdi flexbox ile çözülebilir ve mutlak konumlandırma veya kayma ile yükseklikleri veya kontrol düzenini bilme ihtiyacını ortadan kaldırır. OP'nin ana sorusu, bir ebeveynin boyu bilinmeyen çocukları nasıl tutacağıydı ve bunu belirli bir düzen içinde yapmak istiyorlardı. Üst kapsayıcının yüksekliğinin "içeriğe sığdır" olarak ayarlanması bunu yapar; "display: flex" ve "justify-content: space-between" kullanımları, OP'nin oluşturmaya çalıştığını düşündüğüm bölüm / sütun düzenini üretir.

<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'nin kemanını değiştirdim: http://jsfiddle.net/taL4s9fj/

flexbox'ta css-tricks: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Bunu bir ızgara ile yapabilirsiniz:

article {
    display: grid;
}

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

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

Bu başka bir geç cevap, ancak "çubuk" metnini dört kare arasına yerleştirmenin oldukça basit bir yolunu buldum. İşte yaptığım değişiklikler; Çubuk bölümünde "bar" metnini bir center ve div etiketleri içine sardım.

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

Ve CSS bölümünde yukarıdaki div etiketinde kullanılan bir "bar" sınıfı oluşturdum. Bunu ekledikten sonra çubuk metni dört renkli blok arasında ortalandı.

.bar{
    position: relative;
}