使用 CSS 将图像定位在 3 列文本中答案

【问题标题】：Positioning image in 3 column text with CSS使用 CSS 将图像定位在 3 列文本中
【发布时间】：2014-01-05 14:00:52
【问题描述】：

我使用 Arve Systad 给出的答案（第 3 个答案：flow 2 columns of text automatically with css）来构建以下示例（更大文件的一部分）：

<!DOCTYPE html>
<html>

<head>
<style>
#container { 
width: 100%;
margin: 0 auto;
}

div#container p {
text-align: left; 
float: left; 
width: 25.3%;
margin: 2%;
padding: 0px 2% 10px 2%;
height: 500px;
background-color: yellow;
}

.columnh2 {
line-height: 200%;
font-weight: bold;
}

</style>
</head>

<body>

<div id="container">
<p><span class="columnh2">Title of a text</span><br />
A few lines of text<img src="example.png" border="0" width="81" height="80" /></p>
<p><span class="columnh2">Title of 2nd text</span><br />
More text with a different subject</p>
<p><span class="columnh2">Title of 3th text</span><br />
And more text with yet another subject</p>
</div>

</body>
</html>

第一列中有一张图片（第二列和第三列也会有），但目前定位不正确。我已经包含了一个 picture 我想要它，但我无法让它与 CSS 一起使用。

我该如何解决？

【问题讨论】：

标签： html css

【解决方案1】：

为图像赋予这种风格：

img {
    display: block;
    margin: 32px auto;
}

检查小提琴：https://jsfiddle.net/nnKU9/

#container {
  width: 100%;
  margin: 0 auto;
}

div#container p {
  text-align: left;
  float: left;
  width: 25.3%;
  margin: 2%;
  padding: 0px 2% 10px 2%;
  height: 500px;
  background-color: yellow;
}

.columnh2 {
  line-height: 200%;
  font-weight: bold;
}

img {
  display: block;
  margin: 32px auto;
}

<div id="container">
  <p><span class="columnh2">Title of a text</span><br /> A few lines of text<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
  <p><span class="columnh2">Title of 2nd text</span><br /> More text with a different subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
  <p><span class="columnh2">Title of 3th text</span><br /> And more text with yet another subject<img src="https://picsum.photos/80/80" border="0" width="81" height="80" /></p>
</div>

更新：

如果您希望图像贴在底部（因为文本不平衡），那么您需要定位元素。将position:relative 提供给p，将position:absolute 提供给img。

检查这个更新的小提琴：http://jsfiddle.net/nnKU9/1/

div#container p {
    position: relative;
    ...
}

img {
    position: absolute;
    bottom: 0px;
    left: 25%;
    ...
}

希望对您有所帮助。

【讨论】：

谢谢，效果很好。但是，图像现在没有相互对齐，因为并非每一列都有相同数量的文本。有可能解决这个问题吗？也许通过将图像粘贴到列的底部？

【解决方案2】：

也许是这样？ http://jsfiddle.net/dPUmZ/169/ 当然这是一个例子。如果它有效，您将需要更好地应用它。

$(document).ready(function () { var size = $("#data > p").size(); $(".Column1 > p").each(function (index) {
      if (index >= size / 2) {
          $(this).appendTo("#Column2");
      }
  });
  $(".Column1, #Column2").append("<img src='http://placekitten.com/50/50'>")   });

【讨论】：

【解决方案3】：

http://jsbin.com/IfobojAt/2/edit?html,css,output

你可以试试这个。使用浮动和显示属性。

【讨论】：