CSS图像和文本对齐答案

【问题标题】：CSS image and text aligningCSS图像和文本对齐
【发布时间】：2015-03-22 08:12:49
【问题描述】：

我在对齐图像和文本时遇到了一些麻烦，我希望它们的行为方式。我基本上连续 3 次在侧面显示带有文本的图像。但是，我希望第一张图片在左侧，然后第二张图片在右侧，第三张也是最后一张图片在左侧。

像这样：

Image   text
text    Image
Image   Text

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

Image   Text
Image text text Image

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

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

【问题讨论】：

我认为现在格式化可以了吗？顺便说一句，将每个“行”放在一个“行”中......这可能是解决方案......
您可以将它们放在 div 中，给它们适当的尺寸并使其浮动。
^ 是他所说的。将每个图像和文本组合包装在 div 中
格式现在很完美，谢谢 :D。我现在尝试了很多例子。将报告有效的方法（对 CSS 来说还是新手，抱歉，哈哈）。

标签： css image text

【解决方案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="">

【讨论】：

几乎！实际上我也有类似的东西，但他们只是不按我想要的方式坐着。我想您必须使用“清除”来摆脱浮动另一侧的内容。感谢您的回复和演示！

【解决方案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>

【讨论】：

我不知道我可以清除浮动。一定会读的，所以我明白了。感谢你的回答！它有点难看，但它有效，我可以缩短它（我认为哈哈）。非常感谢！
Erm 猜我不能缩短它....并没有很好地将 1 和 3 结合起来（因为它们都在左边）。我想需要阅读有关 clear 的更多信息。

【解决方案3】：

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

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

【讨论】：

反应很好的人！我也喜欢你的演示。我希望中间图像更多地向右浮动（而不是让文本向左浮动，图像向左浮动......希望它们都向右移动。间距的微小差异）。希望我可以投票（仍然是菜鸟）。不过谢谢！
没有问题。很高兴你最终找到了答案:)

【解决方案4】：

这样的事情呢？

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

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

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

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

【讨论】：

这是我的目标，但它一直困扰着我，并没有按照我的意愿工作。我现在就试试，因为我对正确答案有一点小问题。
我添加了第二个建议，您有一个包含整个内容的外部 div，每个“行”是一个包含两个 div 的 div，每个 div 的内容是图像或文本。