Jak "wyczyścić" elementy pozycjonowane absolutnie

Dobra, wiem, że 1) nie jest to prawdopodobnie możliwe z samym CSS i że 2) to naprawdę nie powinno być możliwe.
Niestety, muszę znaleźć sposób, aby było to możliwe z powodu pewnych wymagań użytkownika.Jak "wyczyścić" elementy pozycjonowane absolutnie

Ok, więc niektóre znacznie uproszczone markup:

<html> 
<head> 
</head> 
<body> 
<div><!--There's content in here --></div> 
<div id="wrapper"> 
<div style="position: absolute;">Stuff1</div> 
<div style="position: absolute;">Stuff2</div> 
<div style="position: absolute;">Stuff3</div> 
<div style="position: absolute;">Stuff4</div> 
</div> 
<div><!--There's content in here --></div> 
</body> 
</html>

To DIV wewnątrz #wrapper że trzeba wyczyścić. Załóżmy, że wszystkie mają najlepsze pozycje z lewej strony.

Główną przeszkodą jest to, że elementy div w opakowaniu są ruchome. Nie tylko to, ale więcej wewnętrznych div można również dodać lub usunąć i umieścić w dowolnym miejscu.

Myślałem, że to może być możliwe z jQuery ... Jakoś znalezienie najniższego punktu w tym div i ustawienie wysokości div do dopasowania. Pracuję nad tym w ten sposób, ale nie jestem pewien, od czego zacząć.

Ktoś ma jakieś pomysły?

Rozwiązanie oparte na Torgamus' zasugerował JavaScript

var maxHeight = 0; 
$('#wrapper div').each(function() { 
    var tmpHeight = $(this).height() + $(this).position().top; 

    if (tmpHeight > maxHeight) { 
     maxHeight = tmpHeight; 
     $('#wrapper').height(maxHeight); 
    } 
});

Źródło

2009-10-30 Nate Wagar

Jaka jest twoja strona w porównaniu do tego, jak chcesz wyglądać? W zależności od tego, jakie są twoje górne i lewe pozycje, może to być 4 strona po każdej, lub 4 pionowo lub inna kombinacja. – dnagirl

@dnagirl - "obok siebie" wiedział, że jesteś z mojej drogi! =) – Buggabill

Czy chcesz ustawić górną część bieżącego elementu div (najwyższego i najwyższego) ostatniego elementu div? –

podstawie Twojego komentarza

Jakoś znalezienie najniższy punkt w ramach tego div i ustawiając wysokość div pasujące. Pracuję nad tym w ten sposób, ale nie jestem pewien, od czego zacząć.

i chęci użyć jQuery, I bita coś przy użyciu JavaScript:

<html> 
<head> 
<title>Clearing abs positions</title> 
<script> 
function setHeight() { 
    var height1 = document.getElementById("abs1").style.top; 
    height1 = parseInt(height1.substring(0, height1.indexOf("px"))); 
    height1 += document.getElementById("abs1").offsetHeight; 

    var height2 = document.getElementById("abs2").style.top; 
    height2 = parseInt(height2.substring(0, height2.indexOf("px"))); 
    height2 += document.getElementById("abs2").offsetHeight; 

    var height3 = document.getElementById("abs3").style.top; 
    height3 = parseInt(height3.substring(0, height3.indexOf("px"))); 
    height3 += document.getElementById("abs3").offsetHeight; 

    var height4 = document.getElementById("abs4").style.top; 
    height4 = parseInt(height4.substring(0, height4.indexOf("px"))); 
    height4 += document.getElementById("abs4").offsetHeight; 

    var maxVal = Math.max(height1, height2); 
    maxVal = Math.max(maxVal, height3); 
    maxVal = Math.max(maxVal, height4); 

    var wrapper = document.getElementById("wrapper"); 
    wrapper.style.height = maxVal + "px"; 
} 
</script> 
</head> 
<body onload="setHeight()"> 
    <div> 
     foo 
     <!--There's content in here --> 
    </div> 
    <div id="wrapper" style="border: 1px solid black;"> 
     <div id="abs1" style="position: absolute; left: 100px; top: 150px; border: 1px solid red;"> 
      Stuff1 
     </div> 
     <div id="abs2" style="position: absolute; left: 200px; top: 250px; border: 1px solid green;"> 
      Stuff2 
     </div> 
     <div id="abs3" style="position: absolute; left: 300px; top: 100px; border: 1px solid blue;"> 
      Stuff3 
     </div> 
     <div id="abs4" style="position: absolute; left: 400px; top: 450px; border: 1px solid orange;"> 
      Stuff4 
     </div> 
    </div> 
    <div> 
     bar 
     <!--There's content in here --> 
    </div> 
</body> 
</html>

Źródło

2009-10-30 16:22:06 Pops

To wygląda niezwykle obiecująco. Zmienię to na jquery i przetestuję. –

Działa doskonale. Wpisywanie implementacji jQuery do mojego pierwszego postu. –

Mimo, że lubię rep, jeśli uznałeś, że jQuery jest bardziej przydatny, prawdopodobnie powinieneś opublikować swoje rozwiązanie jako odpowiedź i udzielić tej odpowiedzi zaakceptowanego znacznika wyboru. Określiłeś jQuery w oryginalnym pytaniu, a ja po prostu nie wiedziałem, jak z niego korzystać. – Pops

Nie ma potrzeby 'Wyczyść' absolutnie elementu pozycjonowanego. W jaki sposób rozmieszczono elementy div? Może powinieneś po prostu ustawić div zawartości w stosunku do bezwzględnego div, tak aby po nim naturalnie płynął.

Może przykleić zawartość div wewnątrz opakowania, sprawić, by była względna, a następnie umieścić ją po innych elementach div i powinna "wyczyścić". Spróbuj!

Źródło

2009-10-30 15:45:07 tahdhaze09

Myślę, że źle zinterpretowałeś pytanie Nate'a. Podejrzewam, że miał na myśli, że inne elementy na stronie pojawią się poniżej najniższego absolutnie pozycjonowanego elementu, nie, że chciał zastosować bezpośredni styl do tych elementów. To powiedziawszy, zgadzam się, że twoje oświadczenie jest prawdziwe. – Pops

My bad. Źle zinterpretowałem pytanie. Mam nadzieję, że nie obraziłem. Mam nadzieję, że to rozwiązało twój problem. – tahdhaze09

Prawdopodobnie najłatwiejszym rozwiązaniem byłoby użycie jQuery, aby uzyskać odległość od górnej krawędzi strony do #wrapper div i wysokości, a następnie umieścić pod nią treść pod pozycją . Coś jak:

$("#div").css('top', ($("#wrapper").offset().top + $("#wrapper").height()) + "px")

Źródło

2009-10-30 15:49:10

Dlaczego nie można całkowicie ustawić pojemnika, a następnie sprawić, by jego dzieci były względne?

Źródło

2009-10-30 16:04:26

Faktycznie, jest to możliwe z CSS, pod warunkiem korzystania technikę podobną techniką „faux pozycjonowania absolutnego”, który wyjaśniono tam:

http://www.alistapart.com/articles/fauxabsolutepositioning/

w Twoim przypadku, można zrobić coś takiego:

<html> 
    <head> 
    </head> 
    <body> 
     <div><!--There's content in here --></div> 
     <div class="wrapper"> 
      <div class="container"> 
       <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff1</div> 
      </div> 
      <div class="container"> 
       <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff2</div> 
      </div> 
      <div class="container"> 
       <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff3</div> 
      </div> 
      <div class="container"> 
       <div class="stuff" style="margin-left:??px, margin-top:??px;">Stuff4</div> 
      </div> 
     </div> 
     <div><!--There's content in here --></div> 
    </body> 
</html>

Użycie marginesu na górze i marginesu lewego w taki sposób, w jaki używałbyś górnego i lewego w rzeczywistym pozycjonowaniu absolutnym.

z następującymi CSS:

.wrapper { 
    overflow: hidden; /* To clear contents */ 
    zoom: 1; /* To fix IE6 bugs with floats */ 
} 

.container { 
    float: left; 
    margin-left: -100%; 
    position: relative; 
    left: 100%; 
    width: 100%; 
} 

.stuff { 
    float: left; 
}

Oczywiście wymagałoby to dodanie dodatkowych pojemników wokół przedmiotów. Ale kończy się to czymś, co zachowuje się dokładnie tak, jak zrobiłyby to pozycje pozycjonowane absolutnie, ale niewyraźne.

Źródło

2011-09-19 18:06:11

Znalazłem to rozwiązanie już dziś i działa doskonale. Myślę, że lepszą nazwą jest "czyste", możliwe pozycjonowanie absolutne. – colllin

Twoje opakowanie to identyfikator, a Twój CSS odnosi się do niego jako do klasy. Czy chciałeś to zrobić? –

Masz rację, to było niedopatrzenie, dzięki! –

Jak "wyczyścić" elementy pozycjonowane absolutnie

Odpowiedz

Powiązane problemy