Question

我在调整图像和文字方面遇到了一些麻烦，我希望它们能够表现出来。我偶尔会在侧面连续3次显示带有文字的图像。但是，我希望第一个图像在左边，然后第二个图像在右边，第三个和最后一个图像在左边。

像这样：

Image   text
text    Image
Image   Text

问题是，当我在中间图像上使用浮动时，其余的内容就像它不存在一样，并且像这样被推到彼此之上（种类）：

Image   Text
Image text text Image

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

修改格式化搞砸了。忽略示例lol。

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

Answer 2

这样的事情怎么样？

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

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

或者类似的东西对你有用吗？

┌────────────────────────────────────────────────────┐
│ ┌────────────────────────────────────────────────┐ │
│ │┌──────────────────────┐┌──────────────────────┐│ │
│ ││                      ││ ┌──────────────────┐ ││ │
│ ││                      ││ │                  │ ││ │
│ ││                      ││ │      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

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

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图像和文本对齐

4 个答案: