【发布时间】:2022-01-20 07:06:10
【问题描述】:
如何将图片放在第二列?
$(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"
})
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style="column-count: 2;">
<img src="http://placekitten.com/100" class="invisible" width="0" height="206"></img>
<img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
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>
【问题讨论】:
-
图像标签是自动关闭的。使用此语法无效。 sn-p 编辑器中的颜色会警告您。
-
这个结构实际上并不是两列。它是被包裹的一列。如果您想明确控制图像的位置,您应该使用实际的列标记。
-
img标签缺失并不能解决问题,简单的列布局不适合。
-
我不是在描述 absence——你有一个额外的结束标签,我没有提出它来解决你的问题。