Vị trí: chiều cao tuyệt đối và phụ huynh?

Question

Tôi có một số thùng chứa và con cái của họ chỉ tuyệt đối/tương đối vị trí. Làm thế nào để thiết lập chiều cao container để con cái của họ sẽ được bên trong của họ?

Dưới đây là các mã:

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

Dưới đây là một jsfiddle. Tôi muốn văn bản "bar" xuất hiện giữa 4 ô vuông chứ không phải đằng sau chúng.

http://jsfiddle.net/Ht9Qy/

Mọi sửa lỗi dễ dàng?

Lưu ý rằng tôi không biết chiều cao của những trẻ này và tôi không thể đặt chiều cao: xxx cho vùng chứa.

Answer 1

Nếu tôi hiểu những gì bạn đang cố gắng làm một cách chính xác, thì tôi không nghĩ rằng điều này là có thể với CSS trong khi vẫn giữ cho trẻ em được định vị hoàn toàn.

Các yếu tố vị trí tuyệt đối được loại bỏ hoàn toàn khỏi luồng tài liệu và do đó kích thước của chúng không thể thay đổi kích thước của cha mẹ.

Nếu bạn thực sự phải đạt được điều này ảnh hưởng trong khi vẫn giữ những đứa trẻ như position: absolute, bạn có thể làm như vậy với JavaScript bằng cách tìm chiều cao của trẻ em hoàn toàn vị trí sau khi họ đã trả lại, và sử dụng rằng để thiết lập chiều cao của cha mẹ.

Ngoài ra, chỉ cần sử dụng float: left/float:right và lợi nhuận để có được hiệu quả định vị tương tự trong khi vẫn giữ những đứa trẻ trong dòng chảy tài liệu, sau đó bạn có thể sử dụng overflow: hidden trên cha mẹ (hoặc bất kỳ kỹ thuật clearfix khác) gây ra chiều cao của nó mở rộng đến con cái của nó.

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

Đây là một câu trả lời muộn, nhưng bằng cách nhìn vào mã nguồn, tôi nhận thấy rằng khi video là toàn màn hình, lớp "mejs-container toàn màn hình" được thêm vào yếu tố "mejs-container". Do đó, có thể thay đổi kiểu dáng dựa trên lớp này.

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

Ngoài ra, nếu bạn muốn thực hiện chất lỏng Video MediaElement của bạn sử dụng CSS, dưới đây là một thủ thuật rất lớn bởi Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/

Chỉ cần thêm video này vào CSS của bạn:

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

tôi hy vọng nó giúp.

Answer 3

Đây là một câu trả lời trễ khác nhưng tôi đã tìm ra một cách khá đơn giản để đặt văn bản "thanh" ở giữa bốn ô vuông. Dưới đây là những thay đổi tôi đã thực hiện; Trong phần thanh, tôi đã bọc văn bản "thanh" trong một thẻ trung tâm và thẻ div.

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

Và trong phần CSS, tôi đã tạo lớp "thanh" được sử dụng trong thẻ div ở trên. Sau khi thêm văn bản thanh này được căn giữa giữa bốn khối màu.

.bar{ 
    position: relative; 
} 

Answer 4

Dưới đây là cách giải quyết của tôi,
Trong ví dụ của bạn, bạn có thể thêm một yếu tố thứ ba với "phong cách cùng" của .Một & .two yếu tố, nhưng không có vị trí tuyệt đối và với tầm nhìn ẩn:

HTML

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

CSS

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