将图像浮动到文本区域的一半

Question

我想要在右边浮动一个图像，但只在文本区域的一半之外。目前，它正在浮动到浏览器窗口的边缘：

https://codepen.io/harlessmark/pen/VwXvoxo

为了增加一层难度，我不能在container类中添加或删除任何属性。这个是可能的吗？

我想让它看起来像这样：

​

​

Answer 1

为此，您可以使用负margin-right值为图像的width的一半(对于左浮动图像，它必须是负margin-left)。但是，在这种情况下，它只适用于像素值，如果只为宽度定义"max“值，那么它工作得非常好，因此您必须以某种方式调整：

(在完全窗口模式下查看以正确查看结果)

​

.container > p {
  /* cannot change anything in here */
  max-width: 660px;
}
.container {
  max-width: 660px;
  margin: 0 auto;
}
.image-wrapper {
  float: right;
  margin-right: -165px;
}

img {
  max-width: 330px;
}

<div class="container">
  <p>Vivamus tempus tortor nec elit mattis tempor. Suspendisse vehicula, urna eu imperdiet convallis, sem nunc pellentesque nunc, ut tristique urna mi sit amet velit. Donec elit dui, consectetur dignissim efficitur ut, tempus id orci. Ut id nunc quis odio consequat facilisis in ut nulla. Pellentesque porttitor, nisl a mollis pulvinar, libero erat rhoncus ante, luctus imperdiet justo mi non sem. Pellentesque convallis ultrices elit, non posuere ligula maximus ac. Nulla commodo enim vel mi tempus, eget dignissim augue commodo. Morbi non lorem nec ante molestie mollis sed ac mauris. Nullam eu lorem luctus, mattis eros vel, auctor diam. Quisque eu varius erat. Integer a aliquet augue, sed ornare mi. Aliquam et urna purus. Morbi pretium suscipit lacus, aliquam elementum orci interdum ac. Sed nec vehicula ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  <div class="image-wrapper"><img src="https://i.imgur.com/4IkrP3w.jpeg" /></div>
  <p>Vivamus tempus tortor nec elit mattis tempor. Suspendisse vehicula, urna eu imperdiet convallis, sem nunc pellentesque nunc, ut tristique urna mi sit amet velit. Donec elit dui, consectetur dignissim efficitur ut, tempus id orci. Ut id nunc quis odio consequat facilisis in ut nulla. Pellentesque porttitor, nisl a mollis pulvinar, libero erat rhoncus ante, luctus imperdiet justo mi non sem. Pellentesque convallis ultrices elit, non posuere ligula maximus ac. Nulla commodo enim vel mi tempus, eget dignissim augue commodo. Morbi non lorem nec ante molestie mollis sed ac mauris. Nullam eu lorem luctus, mattis eros vel, auctor diam. Quisque eu varius erat. Integer a aliquet augue, sed ornare mi. Aliquam et urna purus. Morbi pretium suscipit lacus, aliquam elementum orci interdum ac. Sed nec vehicula ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

​

Answer 2

​

.image-wrapper {
  max-width: 660px;
}

.one {
  max-width: 330px;
  float: right;
}

.two {
  max-width: 330px;
  float: left;
}

<div class="container" <div class="image-wrapper">
  <img class="two" src="https://i.imgur.com/4IkrP3w.jpeg" />
  <p>text</p>
  <img class="one" src="https://i.imgur.com/4IkrP3w.jpeg" />
</div>
<div class="image-wrapper">
  <p>text</p>
</div>
</div>

​