没有父级的堆栈浮动元素

Question

在上面的示例中，图像具有CSS

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

这使得它们在行中浮动，大概是因为宽度限制来自父级，整个帖子，所以在满足帖子的宽度之前它们不会换行或堆叠。

在底部示例中，图像使用CSS

包装在父.gallery中

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

是否可以在不包含父项的情况下实现顶级示例？或者，是否可以使用:first-child和:last-child选择器以及::before和::after动态添加父级，以添加CSS以将其包装在DIV中？

如果可能的话，瞄准纯CSS解决方案。我撞到了一堵砖墙。

编辑：添加更全面的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>

示例和解决方案CodePen： http://codepen.io/anon/pen/WoypyK

Answer 1

您需要为display: block; clear: both;添加.post img css规则：

.post img {
  float: right;
  width: 150px;
  padding-bottom: 3px;
  display: block;
  clear: both;
}

Answer 2

{{ page.customer.orders.limit }}