作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在制作一个带有图像和后面一些文本的 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/
我是一名优秀的程序员,十分优秀!