CSS图像和文本对齐

Question

即时通讯在调整图像和文本的方式时遇到麻烦。 我必须连续3次在侧面显示带有文字的图像。 但是，我希望第一幅图像在左侧，然后第二幅图像在右侧，第三幅也是最后一张图像在左侧。

像这样：

Image   text
text    Image
Image   Text

问题是，当我在中间图像上使用float时，其余内容的行为就像它不存在，并像这样（有点）被推到彼此的顶部：

Image   Text
Image text text Image

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

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

Answer 1

试试这个垃圾桶

jsbin演示

只是一个粗略的例子

  <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="">

Answer 2

那这样的东西呢？

┌────────────────────────┬────────────────────────┐
│ ┌────────────────────┐ │ ┌────────────────────┐ │
│ │                    │ │ │                    │ │
│ │       Image        │ │ │        Text        │ │
│ │                    │ │ │                    │ │
│ │                    │ │ │                    │ │
│ └────────────────────┘ │ └────────────────────┘ │
├────────────────────────┼────────────────────────┤
│ ┌────────────────────┐ │ ┌────────────────────┐ │
│ │                    │ │ │                    │ │
│ │        Text        │ │ │       Image        │ │
│ │                    │ │ │                    │ │
│ │                    │ │ │                    │ │
│ └────────────────────┘ │ └────────────────────┘ │
├────────────────────────┼────────────────────────┤
│ ┌────────────────────┐ │ ┌────────────────────┐ │
│ │                    │ │ │                    │ │
│ │       Image        │ │ │        Text        │ │
│ │                    │ │ │                    │ │
│ │                    │ │ │                    │ │
│ └────────────────────┘ │ └────────────────────┘ │
└────────────────────────┴────────────────────────┘

2x6矩阵是6格，其中包含自己的内容吗？

或类似这样的方法对您更有效？

┌────────────────────────────────────────────────────┐
│ ┌────────────────────────────────────────────────┐ │
│ │┌──────────────────────┐┌──────────────────────┐│ │
│ ││                      ││ ┌──────────────────┐ ││ │
│ ││                      ││ │                  │ ││ │
│ ││                      ││ │      Image       │ ││ │
│ ││                      ││ │                  │ ││ │
│ ││                      ││ │                  │ ││ │
│ ││ Text                 ││ └──────────────────┘ ││ │
│ │└──────────────────────┘└──────────────────────┘│ │
│ └────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────┐ │
│ │┌──────────────────────┐┌──────────────────────┐│ │
│ ││ ┌──────────────────┐ ││                      ││ │
│ ││ │                  │ ││                      ││ │
│ ││ │      Image       │ ││                      ││ │
│ ││ │                  │ ││                      ││ │
│ ││ │                  │ ││                      ││ │
│ ││ └──────────────────┘ ││                 Text ││ │
│ │└──────────────────────┘└──────────────────────┘│ │
│ └────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────┐ │
│ │┌──────────────────────┐┌──────────────────────┐│ │
│ ││                      ││ ┌──────────────────┐ ││ │
│ ││                      ││ │                  │ ││ │
│ ││                      ││ │      Image       │ ││ │
│ ││                      ││ │                  │ ││ │
│ ││                      ││ │                  │ ││ │
│ ││ Text                 ││ └──────────────────┘ ││ │
│ │└──────────────────────┘└──────────────────────┘│ │
│ └────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘

Answer 3

您需要在正确的时间清理浮子。 从您写的内容中我不确定您是否希望中间线向左或向右浮动，但是类似的方法应该适合您。

 #image1 { float: left; } #text1 { float: left; } #image2 { float: right; clear: left; } #text2 { float: right; } #image3 { float: left; clear: right; } #text3 { float: left; } 

 <img alt="Image" id="image1"></img> <span id="text1">Text</span> <img alt="Image" id="image2"></img> <span id="text2">Text</span> <img alt="Image" id="image3"></img> <span id="text3">Text</span> 

Answer 4

下面的工作演示怎么样？：

演示

HTML：

<div class="content">
    <img src="http://www.migman.com/pics/100x100_black.gif"/>
    <p>Hello World</p>
</div>
<div class="content">
    <p>Hello World</p>
    <img src="http://www.migman.com/pics/100x100_black.gif"/>
</div>
<div class="content">
    <img src="http://www.migman.com/pics/100x100_black.gif"/>
    <p>Hello World</p>    
</div>

CSS：

.content
{
    clear:both;
    float:left;
}

.content p
{
    float:left;
}

.content img
{
    float:left;
}

为了方便和可读起见，我将css和html分开。