[![Example](https://i.stack.imgur.com/vjTdg.jpg)](https://i.stack.imgur.com/vjTdg.jpg)

---

In the top example, the images have the CSS

```
.post img{float:right;width:150px;padding-bottom:3px;}

```

Which makes them float in rows, presumably because the width restriction comes from the parent, the whole post, so they won't wrap or stack until the width of the post is met.

---

In the bottom example the images are wrapped in a parent `.gallery` with the CSS

```
.gallery{float:right;width:150px;}
.gallery img{margin-bottom:3px;}

```

---

Is it possible to achieve the top example without wrapping in the parent? Or, is it possible to dynamically add the parent using `:first-child` and `:last-child` selectors and `::before` and `::after` to add CSS to wrap them in a DIV?

Aiming for a pure CSS solution, if at all possible. I've hit a brick wall.

---

Edit: Adding fuller HTML

```
<div class="post" style="width:600px;">
 <p>
  <a href="//placehold.it/150x150"><img src="//placehold.it/150x150" width="150" height="150"></a>
  <a href="//placehold.it/150x150"><img src="//placehold.it/150x150" width="150" height="150"></a></p>
 <p>
  The Godin 5th Avenue Kingpin features a classic shape and sound for the developing musician. The 5th Avenue has a Canadian wild cherry body that produces a range of warm, developed tones. The hollowbody construction adds warmth and resonance to your overall tone. The P90 pickup has a classic 50s inspired sound that can be utilised in both studio and live situations. This model is in a classic black colour. For musicians looking at producing a traditional tone whilst having the reliability of modern designs, the 5th Avenue is the place to go.
 </p>
</div>

```

Example and Solution CodePen:
<http://codepen.io/anon/pen/WoypyK>