CSS图文对齐

Question

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

像这样：

Image   text
text    Image
Image   Text

问题是，当我在中间图像上使用浮动时，其余内容就像不存在一样被推到彼此之上（有点）：

Image   Text
Image text text Image

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

编辑格式搞砸了。忽略例子哈哈。

Answer 1

这样的事情怎么样？

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

其中 2x6 矩阵是 6 个 div，里面有自己的内容？

或者像这样的东西更适合你？

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

Answer 2

您需要在正确的时间清除浮动。我不确定你写的是想要中间线向左还是向右浮动，但像这样的东西应该适合你。

#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 3

试试这个垃圾箱

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

Answer 4

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

Demo

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 分开了。

CSS图文对齐

CSS image and text aligning

css

text

image