div 中的文本不环绕图像
[英]Text not wrapping around image in div
问题描述
I am trying to make it so the text in my div wraps around my image that is within its own div.
我正在努力使我的 div 中的文本环绕在它自己的 div 中的我的图像周围。
It currently looks like the image on the left but I want it to look like the image on the right:它目前看起来像左边的图像，但我希望它看起来像右边的图像：
Here is my HTML & CSS:这是我的 HTML 和 CSS：
#nativeadvertisement { background-color: #f5f5f5; width: 293px; height: 595px; border-style: solid; border-color: #dddddd; border-width: thin; position: relative; } #nativeheader { color: #005799; font-weight: bold; font-family: "Roboto Condensed", "Helvetica Neue"; font-size: 1.5rem; margin: 15px; } #nativeimagedesktop { width: 260px; height: 260px; background-color: #fff; object-fit: cover; border: 4px solid #fefefe; border-radius: 0; box-shadow: 0 0 0 1px rgba(10, 10, 10, .2); display: block; margin: 13px; } #nativetagline { margin: 15px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.9rem; color: #333; overflow: hidden; font-style: italic; } #nativebodytextextended { margin: 15px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.9rem; color: #333; overflow: hidden; float: left; } #nativelogo { float: right; width: 80px; height: 80px; object-fit: cover; border-style: solid; border-color: #dddddd; border-width: thin; display: inline-block; margin-right: 12px; position: absolute; bottom: 10px; left: 200px; } #nativesponsored { float: right; position: absolute; left: 225px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.8rem; color: #333; font-weight: bold; } a:link { text-decoration: none; } a:visited { text-decoration: none; } #nativelogoimg { float: right; width: 80px; height: 80px; object-fit: cover; display: inline; } #nativeCTA { margin: 15px; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-size: 0.9rem; color: #333; overflow: hidden; font-weight: bold; position: absolute; bottom: 0; }
<html> <link rel="stylesheet" type="text/css" href=nativemcncss.css> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet"><a href=%%CLICK_URL_UN ESC%%[%NativeClickthoughURL%] target="_blank"> <div id="nativeadvertisement"> <div id="nativesponsored">Sponsored</div> <div id="nativeheader">[%NativeHeadline%]</div> <div id="nativetagline">[%NativeTagline%]</div> <div id="nativeimagedesktop"><img src="[%NativeImageDesktop%]"alt="Native Image"></div> <div id="nativebodytextextended">[%NativeBodyTextExtended%]Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you.<br><br> Hello, nice to meet you. Hello, nice to meet you, Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to </div> <div id="nativelogo"><img id="nativelogoimg" src="[%NativeLogo%]" alt="Native Logo"></div> <div id="nativeCTA">[%NativeCTA%]</div> </div></a> </html>2 个解决方案
解决方案1
1 2020-08-20 14:34:30
Your problem is that you cannot use absolute positioning together with floating, and must also be in the same block with the text, and this question is similar to this你的问题是绝对定位不能和浮动一起使用，而且必须和文本在同一个块，这个问题和这个类似
in addition, see also: Floating an image to the bottom right with text wrapping around此外，另请参阅： 将图像浮动到右下角并环绕文字
解决方案2
0 2020-08-20 15:56:27
I think Unbywyd solution was great.我认为 Unbywyd 解决方案很棒。 but apparently you want something else.但显然你想要别的东西。 Try this.试试这个。
Add the text in the div to a <P> and use calc method to make the <p> width shorter and you will be able to fit the image without any issues.将 div 中的文本添加到<P>并使用calc方法使<p>宽度更短，您将能够毫无问题地适应图像。
CSS file changes: CSS 文件修改：
#nativelogo {
border-style: solid;
border-width: thin;
position: absolute;
bottom: 10px;
left: 200px;
margin-right: 15px;
}
#nativesponsored {
float: right;
position: absolute;
left: 225px;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-size: 0.8rem;
color: #333;
font-weight: bold;
}
and here is the HTML changes I made这是我所做的 HTML 更改
<a ESC%%[%NativeClickthoughURL%] target="_blank">
<div id="nativeadvertisement">
<div id="nativesponsored">Sponsored</div>
<div id="nativeheader">[%NativeHeadline%]</div>
<div id="nativetagline">[%NativeTagline%]</div>
<div id="nativeimagedesktop"><img src="[%NativeImageDesktop%]" alt="Native Image"></div>
<div id="nativebodytextextended">
<p>
[%NativeBodyTextExtended%]Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you, Hello, nice to meet you.
</p>
<p style="width: calc(100% - 80px);"> Hello, nice to meet you. Hello, nice to meet you. Hello, nice to meet you. Hello, nice to
</p>
<div id="nativelogo"><img id="nativelogoimg" src="[%NativeLogo%]" alt="Native Logo"></div>
</div>
<div id="nativeCTA">[%NativeCTA%]</div>
</div>
</a>
and here is how it looks:这是它的样子：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.