CSS图像和文本对齐

Question

我在对齐我的图像和文本时遇到了一些问题，我希望它们如何表现。我实质上连续 3 次在侧面显示带有文本的图像。但是，我希望第一张图片在左边，然后第二张图片在右边，第三张也是最后一张图片在左边。

像这样:

Image   text
text    Image
Image   Text

问题是，当我在中间图像上使用 float 时，其余内容就像它不存在一样，并像这样(有点)被推到彼此之上:

Image   Text
Image text text Image

我试图 float 所有图像，但随后文本的行为就像图像不存在一样，并被放置在我不想要的位置。我将如何实现我想要的对齐方式？

编辑 格式搞砸了。忽略示例大声笑。

Answer 1

试试这个垃圾桶

jsbin demo

只是一个粗略的例子

  <div style="width: 50%; float: left;">i am text here</div>
  <img style="width: 50%; float: right;" src="sdlkfj" alt="">

  <img style="width: 50%; float: left;" src="sdlkfj" alt="">
  <div style="width: 50%; float: right;">i am text here</div>

  <div style="width: 50%; float: left;">i am text here</div>
  <img style="width: 50%; float: right;" src="sdlkfj" alt="">