gpt4 book ai didi

html - 如何阻止文字在图片下方或上方

转载 作者:太空宇宙 更新时间:2023-11-03 21:03:53 26 4
gpt4 key购买 nike

文字越过图片,但每次它碰到那张图片时我都需要换行。 HTML 和 CSS 如下。我可以只用图片 float 吗?或者我需要其他东西。调整大小时,文本也不能低于段落的边框。

 img{
position: absolute;
right: 0;
top: 0;
align:right;

margin-left: 125px;
width: 100px;
height: 100px;
margin-left: 120px;


}

.participation{


position: relative;
height: 250px;
width: 50%;
}

p{
position: absolute;
}

HTML

<body id="css-zen-garden">
<div class="page-wrapper">



<div class="main supporting" id="zen-supporting" role="main">


<div class="participation" id="zen-participation" role="article">
<h3>Participation</h3>
<p>Strong visual design has always been our focus. You are modifying this page, so strong <abbr title="Cascading Style Sheets">CSS</abbr> skills are necessary too, but the example files are commented well enough that even <abbr title="Cascading Style Sheets">CSS</abbr> novices can use them as starting points. Please see the <a href="http://www.mezzoblue.com/zengarden/resources/" title="A listing of CSS-related resources"><abbr title="Cascading Style Sheets">CSS</abbr> Resource Guide</a> for advanced tutorials and tips on working with <abbr title="Cascading Style Sheets">CSS</abbr>.</p>
<img src="zebra_shark1.jpg">

What paragraph should look like

Whole task

最佳答案

为此,您需要停止使用 position: absolute。您可以使用 float 实现所需的行为:

p {
max-width: 500px; /*set width for demo purposes, so that you see the text wrapping*/
}

img {
float: right
}
<p>
<img src="https://via.placeholder.com/150">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>

关于html - 如何阻止文字在图片下方或上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56019865/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com