Question

我正在努力做到这一点，以便使div中的文本环绕其自身div中的图像。

当前看起来像左边的图像，但我希望它看起来像右边的图像：

这是我的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>

Answer 1

您的问题是您不能将绝对定位与浮点运算一起使用，并且还必须与文本位于同一块中，并且这个问题与to this

类似

此外，另请参见：Floating an image to the bottom right with text wrapping around

Answer 2

我认为Unbywyd解决方案很棒。但显然您想要其他东西。试试这个。

将div中的文本添加到<P>并使用calc方法使<p>的宽度变短，您将能够使图像适合而没有任何问题。

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

这是我所做的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>

这是它的外观：

文本未在div中环绕图像

2 个答案: