Float image halfway out of text area-CodePudding

I want to float an image to the right but only halfway out of the text area. Currently, it is floating to the edge of the browser window:

CodePudding user response：

You can use a negative margin-right value of half the images' width for this purpose (for left-floated images it has to be a negative margin-left). However, it only works with a pixel value in this case, and it work work so well if you only define "max" values for width, so you'd have to adjust to that somehow:

(view in full window mode to see the result properly)

.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 >
  <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 ><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>

CodePudding user response：

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

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

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

<div  <div >
  <img  src="https://i.imgur.com/4IkrP3w.jpeg" />
  <p>text</p>
  <img  src="https://i.imgur.com/4IkrP3w.jpeg" />
</div>
<div >
  <p>text</p>
</div>
</div>