如何使用CSS column-count属性将图片放置在第二列？

我之前碰到过类似的布局需求，这里分享一个亲测可行的实现方案，能让图片稳稳落在两列布局的第二列中：

完整实现代码 #

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style>
        .invisible { float: right; } 
        .bottom { float: right; padding-left: 10px; padding-top: 0px; clear: right; bottom: 10px; } 
        div { max-width: 700px; margin: 0 auto; margin-top: 4em; text-align: justify; } 
        p { text-align: justify; }
    </style>
    <script>
        $(document).ready(function() { 
            $(window).trigger('resize'); 
        }); 
        $(window).resize(function() { 
            divH = $('div').height(); 
            console.log(divH); 
            newH = divH - 105; 
            $('div img').first().css({ "height": newH + "px" }) 
        }); 
    </script>
</head>
<body>
    <div style="column-count: 2;"> 
        <img src="http://placekitten.com/100" class="invisible" width="0" height="206" alt="占位透明图">
        <img src="http://placekitten.com/100" class="bottom" width="100" height="100" alt="目标显示图片">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem aspernatur ut impedit, quod, similique obcaecati velit sit distinctio ab, vitae labore, quibusdam excepturi iure maxime nihil tenetur dicta. Iure, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus adipisci, porro vitae perferendis similique ullam sint, aut labore! Similique rerum inventore dolor sint quae cupiditate repellat debitis saepe quia laboriosam! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis autem in quaerat itaque, architecto deserunt inventore officiis laborum commodi, corporis quam dolorum labore optio earum unde adipisci impedit, sed sint! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut voluptatem rem in mollitia voluptatum laboriosam expedita, ut tempora blanditiis et tempore sapiente minima consequatur facere voluptatibus quibusdam ad sed velit vero nesciunt ipsa. Possimus impedit labore non cumque, culpa nam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio numquam, temporibus velit quas quod, aliquid iure, possimus molestiae laboriosam perspiciatis a iusto dignissimos magni suscipit officiis nesciunt. Sapiente corporis optio mollitia, enim temporibus dolore amet magni, at hic laboriosam atque beatae, quas eum, laudantium. Distinctio maxime commodi sunt quis soluta sequi labore ratione ad atque saepe cupiditate tempora ab numquam consectetur tenetur voluptatem inventore porro, ut obcaecati magnam culpa. Architecto consequuntur recusandae ut aperiam ullam harum officia maiores cumque cupiditate id. Modi, labore id dignissimos ducimus laborum temporibus pariatur, quae reprehenderit at tenetur mollitia, recusandae quas commodi quidem soluta repellat. 
    </div>
</body>
</html>

核心逻辑说明 #

• 占位透明图（.invisible）：这个图片宽度设为0，通过动态计算高度占据第一列的垂直空间，把目标图片“挤”到第二列区域。
• 目标图片样式（.bottom）：用float: right和clear: right确保图片靠右对齐，且不会和其他浮动元素重叠，内边距则用来保证图片和文本的间距更美观。
• 动态高度计算：监听窗口resize事件，实时调整占位图的高度，确保窗口大小变化时，图片依然稳定停留在第二列。

内容的提问来源于stack exchange，提问作者smallMars