Tenho alguns contêineres e seus filhos estão posicionados apenas absolutos / relativamente. Como definir a altura dos contêineres para que seus filhos fiquem dentro deles?
Aqui está o código:
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;
}
Aqui está um jsfiddle. Quero que o texto da "barra" apareça entre 4 quadrados, não atrás deles.
Alguma solução fácil?
Observe que não sei a altura dessas crianças e não consigo definir a altura: xxx para contêineres.
Respostas:
Se eu entendi o que você está tentando fazer corretamente, então não acho que isso seja possível com CSS mantendo as crianças absolutamente posicionadas.
Os elementos absolutamente posicionados são completamente removidos do fluxo de documentos e, portanto, suas dimensões não podem alterar as dimensões de seus pais.
Se você realmente tivesse que atingir esse efeito enquanto mantinha os filhos como
position: absolute
, poderia fazer isso com JavaScript, encontrando a altura dos filhos posicionados absolutamente após a renderização e usando isso para definir a altura do pai.Alternativamente, apenas use
float: left
/float:right
e as margens para obter o mesmo efeito de posicionamento enquanto mantém os filhos no fluxo do documento, você pode usaroverflow: hidden
no pai (ou qualquer outra técnica de clearfix) para fazer com que sua altura se expanda para a de seus filhos.fonte
Aqui está minha solução alternativa.
Em seu exemplo, você pode adicionar um terceiro elemento com "mesmos estilos" de .um & .two elementos, mas sem a posição absoluta e com visibilidade oculta:
HTML
CSS
fonte
Esta é uma resposta tardia, mas olhando o código-fonte, percebi que quando o vídeo está em tela cheia, a classe "mejs-container-fullscreen" é adicionada ao elemento "mejs-container". Assim, é possível alterar o estilo com base nesta classe.
Além disso, se você deseja tornar seu vídeo MediaElement fluido usando CSS, abaixo está um ótimo truque de Chris Coyier: http://css-tricks.com/rundown-of-handling-flexible-media/
Basta adicionar ao seu CSS:
Espero que ajude.
fonte
Este tipo de problema de layout pode ser resolvido com o flexbox agora, evitando a necessidade de conhecer alturas ou controlar o layout com posicionamento absoluto, ou flutuadores. A principal questão de OP era como fazer um pai conter filhos de altura desconhecida, e eles queriam fazer isso dentro de um determinado layout. Definir a altura do contêiner pai para "ajustar o conteúdo" faz isso; usando "display: flex" e "justify-content: space-between" produz o layout de seção / coluna que acho que o OP estava tentando criar.
Eu modifiquei o violino do OP: http://jsfiddle.net/taL4s9fj/
css-tricks no flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
fonte
Esta é outra resposta tardia, mas descobri uma maneira bastante simples de colocar o texto "barra" entre os quatro quadrados. Aqui estão as alterações que fiz; Na seção bar, envolvi o texto "bar" dentro de uma tag center e div.
E na seção CSS eu criei uma classe "bar" que é usada na tag div acima. Depois de adicionar isso, o texto da barra foi centralizado entre os quatro blocos coloridos.
fonte