gpt4 book ai didi

html - 如何在 :before? 粘贴的图像周围放置文本

转载 作者:行者123 更新时间:2023-11-27 23:27:55 25 4
gpt4 key购买 nike

我正在制作一个带有图像和后面一些文本的 block ,但我的布局不起作用。我正在尝试 float:left,但图像仍然高于文本。可能因为我主要使用 flexbox 而有些东西不起作用?

这是 HTML:

<div class="info info-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

和 CSS:

.info {
cursor: pointer;
background: lightgrey;
margin: 10px 15px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.info p {
margin: 0px;
font-weight: normal;
font-size: 12px;
}

.info p:before {
content: url("http://cs604323.vk.me/v604323026/18bef/a_V9CFM-iRU.jpg");
}

希望有人知道哪里出了问题。

最佳答案

.info {
cursor: pointer;
background: lightgrey;
margin: 10px 15px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.info p {
margin: 0px;
font-weight: normal;
font-size: 12px;
position: relative;
}
.info p:nth-of-type(1){
padding-left: 55px;
}
.info p:nth-of-type(1):before {
content: '';
position: absolute; top: 50%; left: 0;
margin-top: -25px;
background: url("http://cs604323.vk.me/v604323026/18bef/a_V9CFM-iRU.jpg");
width: 50px;
height: 50px;
}
<div class="info info-1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nisi ligula, dapibus a volutpat sit amet, mattis et dui. Nunc porttitor accumsan orci id luctus. Phasellus ipsum metus, tincidunt non rhoncus id, dictum a lectus. Nam sed ipsum a lacus sodales eleifend. Vestibulum lorem felis, rhoncus elementum vestibulum eget, dictum ut velit. Nullam venenatis, elit in suscipit imperdiet, orci purus posuere mauris, quis adipiscing ipsum urna ac quam.</p>
</div>

关于html - 如何在 :before? 粘贴的图像周围放置文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37497415/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com