Как “очистить” абсолютно расположенные элементы

Question

Как “очистить” абсолютно расположенные элементы

Короткий ответ:
могут быть люди, которые являются к глупому для получения хорошими математика. Но те люди обычно к глупому для программирования, также.

Поэтому, если у Вас есть некоторые навыки в программировании, Вы могли бы считать себя достаточно умными для изучения математики также.

Примечание: Я знаю, что существуют умные люди с серьезной математической проблемой с обучаемостью, но я думаю, что это больше похоже на исключение.

7

jquery css

задан Nate Wagar 30 October 2009 в 18:44

4 ответа

Почему нельзя позиционировать контейнер абсолютно, а затем сделать его дочерние элементы относительными?

1

ответ дан 6 December 2019 в 11:49

Вам не нужно «очищать» абсолютно позиционированный элемент. Как позиционируются div? Может быть, вам просто следует расположить div содержимого относительно абсолютного div, чтобы он естественным образом перемещался после него.

Может быть, вставить div содержимого внутри оболочки, сделать его относительным, а затем поместить его после других div, и он должен «очиститься». Попробуйте!

0

ответ дан 6 December 2019 в 11:49

Вероятно, самым простым решением было бы использовать jQuery для получения расстояния от верха страницы до блока #wrapper и высоты, а затем размещения содержимого

под этим. Примерно так:

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

2

ответ дан 6 December 2019 в 11:49

Другие вопросы по тегам:

jquery css

Похожие вопросы:

score 1 · Accepted Answer

На основе вашего комментария

Каким-то образом найти самую низкую точку в этом div и установить соответствующую высоту div. Я работаю над этим, но не знаю, с чего начать.

и ваша готовность использовать jQuery, я кое-что придумал, используя 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>