Question

我使用了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。

我该如何解决？

Answer 1

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

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

Answer 2

将图像赋予此样式：

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

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

更新：

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

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

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

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

希望有所帮助。

Answer 3

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

你可以试试这个。使用float和display属性。

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

3 个答案: