使用 CSS 在 3 列文本中定位圖像
[英]Positioning image in 3 column text with CSS
問題描述
我使用了 Arve Systad 給出的答案（第三個答案： 使用 css 自動處理 2 列文本）來構建以下示例（較大文件的一部分）：
<!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>
第一列有一個圖像（第二列和第三列也會有），但目前沒有以正確的方式定位。 我已經包含了一張我想要它的圖片，但我無法讓它與 CSS 一起工作。
我該如何解決？
3 個解決方案
解決方案1
0 2014-01-05 14:15:29
也許像那樣？ 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'>") });
解決方案2
0 已采納 2014-01-05 14:15:38
給圖像這種風格：
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%;
...
}
希望有幫助。
解決方案3
0 2014-01-05 14:32:13
http://jsbin.com/IfobojAt/2/edit?html,css,output
你可以試試這個。 使用浮動和顯示屬性。
使用CSS在圖片上放置文字
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.