Question

我想将图像放置在父div的右下角。

CSS想法来自另一个答案-不起作用（除非我明确为其设置高度，否则calc（100％-200px）使用页面高度100％而不是父div高度100％）。

现在我做了一些我想要做的JS（请参阅我自己的答案），问题：没有JS，我可以（以及如何）获得相同的结果吗？

（而且该功能在jsfiddle和cssdesk.com中均不起作用，因此您必须将其复制粘贴到您自己的html文件中并导航到它……）

<style>
    .container {
        overflow: auto;
        background-color: green;
    }

    img {
        height: 200px;
        width: 150px;
        background-color: white;
        border: 50px double steelblue;
        box-sizing: border-box;
        float: right;
        clear: right;
    }

    .spacer {
        /* height: calc(100% - 200px); <--- this one sadly doesn't work */
        float: right;
    }
</style>
<div style="background-color: blue">header + other stuff</div>
<div class="container" id="container">
    <div class="spacer" id="spacer"></div>
    <img id="img" />
    <p>
        Conceptualizing random endpoints in an access matrix 
        provides reach extensions enterprise wide. Respective 
        divisions historically insignificant, upscale trendlines 
        in a management inventory analysis survivability format.
    </p><p>
        Document-centric projections unfetter traditional 
        auditing practices rivaling central process management. 
        Advanced functionality, easy administration, proclaim 
        the hallmarks of unprecedented opportunity.
    </p><p>
        Iteration system-wide engenders economies of scale, 
        cross-media technology, presentation action items and 
        life cycle replication.
    </p><p>
        Enterprise engenderment accelerates initiative platforms, 
        reducing staffing components, integration of technical 
        accessibility, resulting in bottom line pluralisms, 
        benefit-wise. Incidental re-sizing staff requirements 
        through attrition can be accelerated by paradigm shifts 
        and focusing on core suitability and cross-training.
    </p><p>
        Marketing teams input produce cross purposing in view of 
        goal alignments due to knowledge paucity, necessitating 
        workflow education and orientation. Media sourcing as an 
        acquisition strategy is counterproductive in a internet 
        environment in virtual component methodology. Imaging 
        through ideals rather than real world branding, is a 
        perilous undertaking with negative results. Branding 
        strategies generating motion as activity without 
        reproducible results is a ultimately futile effort if 
        left in place.
    </p><p>
        Analysis of funding is inappropriate in this effort as 
        assets are repurposed in statements who existence owe 
        their identity to their obscurity. Obfuscation of 
        responsibility underlines these offerings, whose primary 
        function is to generate revenue and secondarily to shift 
        accountability downstream.
    </p><p>
        Syntactically valid structuring implementation, 
        enhancement based reporting, technology development, 
        proprietary incidentals administration are all areas of 
        content modularization engaging visibility deficits. 
        Cyberliability management procedures underlining 
        performance degradation vouchsafing interdepartmental 
        communication guideline infrastructure for evaluating 
        content management.
    </p>
</div>
<div style="background-color: red">other stuff + footer</div>

Answer 1

使用JS的一种解决方案依赖于容器的高度，浏览器会更新该容器的高度，然后使用该高度来重新定位图像。

黄色框应该是宽度：0px，像上面一样是空的，在这里它仅宽于可视化，实际发生的情况以及显示JS的调试输出。

<style>
    .spacer {
        width: 150px;
        background-color: yellow;
    }
</style>
<script>
(function() {
    document.addEventListener("DOMContentLoaded", 
    function (e) {
        var container = document.getElementById("container");
        var spacer    = document.getElementById("spacer");
        var img       = document.getElementById("img");

        var c_container = window.getComputedStyle(container);
        var c_img       = window.getComputedStyle(img      );

        var prev_width = 0;

        setInterval(
            function() {
                if (!document.hidden) {
                    var w_container = parseInt(c_container.getPropertyValue("width"));

                    var h_img       = parseInt(c_img      .getPropertyValue("height"));
                    if (w_container > prev_width) {
                        var h_container = h_img;
                    } else {
                        var h_container = parseInt(c_container.getPropertyValue("height"));
                    }
                    prev_width = w_container;
                    var h_spacer    = h_container - h_img;

                    spacer.style.height = h_spacer;

                    spacer.innerHTML = ""
                        + "w_container: " + w_container + "</br>"
                        + "prev_width: " + prev_width + "</br>"
                        + "h_container: " + h_container + "</br>"
                        + "h_img: " + h_img+ "</br>"
                        + "h_spacer: " + h_spacer + "</br>"
                    ;
                }
            }, 100
        );
    }
    );
})();
</script>

如何使对象浮动在其他标签的右下角

1 个答案: