Pozycja: absolutna i wzrost rodzica?

Question

Pozycja: absolutna i wzrost rodzica?

Mam kilka pojemników, a ich dzieci są tylko absolutne / względnie ustawione. Jak ustawić wysokość pojemników, aby ich dzieci były w nich?

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

Tu jest jsfiddle. Chcę, aby tekst" bar " pojawiał się między 4 kwadratami, a nie za nimi.

Http://jsfiddle.net/Ht9Qy/

Jakieś proste poprawki?

Zauważ, że nie znam wysokości tych dzieci i Nie mogę ustawić wysokości: xxx dla kontenerów.

61

html css absolute position height

Author: Wordpressor, 2012-11-25

Source

4 answers

Oto moje obejście.]} W przykładzie możesz dodać trzeci element z "te same style" z .one&.dwa elementy, ale bez pozycji absolutnej i z ukrytą widocznością:

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

Author: BBeta,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-09-18 14:05:42

Jest to późna odpowiedź, ale patrząc na kod źródłowy, zauważyłem, że gdy wideo jest pełnoekranowe, Klasa " mejs-container-fullscreen "jest dodawana do elementu" mejs-container". W ten sposób możliwa jest zmiana stylizacji na podstawie tej klasy.

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

Również, jeśli chcesz, aby Twój film MediaElement był płynny za pomocą CSS, poniżej znajduje się świetny trick Chrisa Coyiera: http://css-tricks.com/rundown-of-handling-flexible-media/

Po prostu dodaj to do swojego 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;
}

Mam nadzieję, że to pomoże.

2

Author: user3517189,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-04-09 21:49:00

To kolejna późna odpowiedź, ale wymyśliłem dość prosty sposób umieszczania tekstu "bar" pomiędzy czterema kwadratami. Oto wprowadzone przeze mnie zmiany; W sekcji bar zawijałem tekst "bar" w środku i znaczniki div.

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

I w sekcji CSS utworzyłem klasę "bar", która jest używana w powyższym tagu div. Po dodaniu tekstu pasek został wyśrodkowany między czterema kolorowymi blokami.

.bar{
    position: relative;
}

-14

Author: CESARVALLES,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-04-23 22:18:30

score 65 · Accepted Answer

Jeśli rozumiem, co próbujesz zrobić poprawnie, to nie sądzę, że jest to możliwe z CSS, utrzymując dzieci w absolutnej pozycji.

Absolutnie umieszczone elementy są całkowicie usuwane z obiegu dokumentów, a zatem ich wymiary nie mogą zmienić wymiarów ich rodziców.

Jeśli naprawdę musisz osiągnąć ten efekt, zachowując dzieci jako position: absolute, możesz to zrobić za pomocą JavaScript, znajdując wysokość absolutnie ustawia dzieci po ich renderowaniu i używa ich do ustawiania wysokości rodzica.

Alternatywnie, wystarczy użyć float: left/float:right i marginesy, aby uzyskać ten sam efekt pozycjonowania, utrzymując dzieci w obiegu dokumentu, możesz użyć overflow: hidden na rodzicu (lub innej technice clearfix), aby zwiększyć jego wysokość do wysokości dzieci.

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