css 如何防止浮动图像出现在HR旁边？[duplicate]

hl0ma9xz 于 2023-01-18 发布在其他

关注(0)|答案(2)|浏览(127)

- 此问题在此处已有答案**：

How to make full width?（5个答案）
5天前关闭。
我目前正在编程一个网站，里面有很多图片和HR线。不幸的是，一些浮动图片旁边很少有文字，最终没有在HR线的上面。

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px;
  float: right;
  padding: 15px;
  max-width: 25%;
}

<img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<hr>

css

来源：https://stackoverflow.com/questions/75099677/how-do-i-prevent-a-float-image-from-going-next-to-the-hr

2条答案

按热度按时间

fdx2calv1#

用div Package img标签并使用flex

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px; 
  padding: 15px;
  max-width: 25%;
  border: solid 1px red;
}

div {
display:flex;
justify-content:flex-end;
  border: solid 1px green;
}

<div id='container'>
  <img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
</div>  
  <h2>Lorem Ipsum</h2>
  <p>Dolor Sit Amet</p>
  <hr>

赞(0）回复(0）举报 2023-01-18

pgvzfuti2#

我相信floats会把元素从dom流中取出。在图像上使用inline-block并调整左边距

p {
  font-family: serif;
  text-indent: 100px;
  text-align: justify;
}

img {
  width: 200px;
  display:inline-block;
  margin-left:max(calc(100vw - 200px - 30px - 3px),calc(75vw - 45px));  
  padding: 15px;
  max-width: 25%;
  border:solid 1px red;
}

div{
border:solid 1px green;}

body,html{
margin:0;
padding:0;
}

<div><img src="https://upload.wikimedia.org/wikipedia/en/thumb/0/03/Flag_of_Italy.svg/255px-Flag_of_Italy.svg.png" alt="italy flag">
<h2>Lorem Ipsum</h2>
<p>Dolor Sit Amet</p>
<hr>
</div>

赞(0）回复(0）举报 2023-01-18

我来回答

css 如何防止浮动图像出现在HR旁边？[duplicate]

2条答案

相关问题

热门标签

最新问答