ตำแหน่ง: ค่าสัมบูรณ์และส่วนสูงของผู้ปกครอง?

ฉันมีตู้คอนเทนเนอร์และลูก ๆ ของพวกเขาอยู่ในตำแหน่งที่แน่นอน / ค่อนข้างสูง จะตั้งความสูงของตู้คอนเทนเนอร์อย่างไรให้ลูก ๆ อยู่ข้างใน?

นี่คือรหัส:

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 ฉันต้องการให้ข้อความ "bar" ปรากฏระหว่าง 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%;
}

นอกจากนี้หากคุณต้องการทำให้วิดีโอ MediaElement ของคุณลื่นไหลโดยใช้ CSS ด้านล่างนี้เป็นเคล็ดลับที่ยอดเยี่ยมของ 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/

css-Tricks บน flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

คุณสามารถทำได้ด้วยกริด:

article {
    display: grid;
}

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

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

นี่เป็นอีกหนึ่งคำตอบที่ล่าช้า แต่ฉันพบวิธีที่ค่อนข้างง่ายในการวางข้อความ "bar" ไว้ระหว่างสี่เหลี่ยมทั้งสี่ นี่คือการเปลี่ยนแปลงที่ฉันทำ ในส่วนของแถบฉันรวมข้อความ "bar" ไว้ในแท็กกลางและ div

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

และในส่วน CSS ฉันได้สร้างคลาส "bar" ซึ่งใช้ในแท็ก div ด้านบน หลังจากเพิ่มสิ่งนี้ข้อความแถบจะอยู่กึ่งกลางระหว่างบล็อกสีทั้งสี่

.bar{
    position: relative;
}