【问题标题】:How to place image in column number two using the CSS column-count property?如何使用 CSS column-count 属性将图像放在第二列?
【发布时间】: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——你有一个额外的结束标签,我没有提出它来解决你的问题。

标签: html css alignment


【解决方案1】:

将html标签移到段落末尾怎么样?

$(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;
}

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>



  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.
      <img src="http://placekitten.com/100" class="bottom" width="100" height="100"></img>
</div>

【讨论】:

  • 此解决方案不适合,因为文本不会在图像周围流动。
  • 我在 stackoverflow 上检查了类似的问题,here 是您可以使用的两个 js 解决方案。如果您不想使用 js 并且您的文本不会更改,我想您可以 move the picture in lines of p。它不是很好的清洁解决方案,但比较能量和效果..
  • 谢谢,但没有任何例子可以帮助解决问题。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-01-15
  • 1970-01-01
  • 1970-01-01
  • 2018-12-10
  • 1970-01-01
  • 2018-03-24
  • 2013-06-24
相关资源
最近更新 更多