jquery - Readmore.js定位

标签 jquery html css position expand

我希望文本从顶部开始,图像也是从顶部开始的。这是一个jsfiddle .

HTML:

<div class = "article">
    <img src="http://malsup.github.io/images/p1.jpg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper sapien eget ante porta eleifend. Aliquam enim velit, suscipit non lorem at, rhoncus sollicitudin arcu. Pellentesque blandit aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl magna. Mauris in consequat augue, quis vestibulum augue. Maecenas aliquam scelerisque nunc vitae scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet fermentum arcu. Fusce mollis a augue vel tempus. Etiam aliquet enim et felis congue sodales. Integer sit amet diam nec erat fermentum scelerisque. Phasellus elit sapien, placerat eu mi vitae, convallis pulvinar turpis.          
</div>

最佳答案

添加到您的 CSS vertical-align:top; float :左;

img{
 
 height:150px;
  vertical-align:top;
  float:left;
}
<div class = "article">
 <img src="http://malsup.github.io/images/p1.jpg">
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ullamcorper sapien eget ante porta eleifend. Aliquam enim velit, suscipit non lorem at, rhoncus sollicitudin arcu. Pellentesque blandit aliquet egestas. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce vel nisl magna. Mauris in consequat augue, quis vestibulum augue. Maecenas aliquam scelerisque nunc vitae scelerisque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam sit amet fermentum arcu. Fusce mollis a augue vel tempus. Etiam aliquet enim et felis congue sodales. Integer sit amet diam nec erat fermentum scelerisque. Phasellus elit sapien, placerat eu mi vitae, convallis pulvinar turpis.

Phasellus euismod quam ut blandit tempus. Praesent consequat sem sit amet ipsum suscipit, a finibus enim mattis. Phasellus mollis dolor vitae turpis condimentum ultrices. In placerat blandit quam in faucibus. Sed aliquet malesuada diam, eu aliquam ligula euismod vel. Donec eget ullamcorper tortor. Maecenas lacinia tincidunt enim, in tristique nisl vestibulum nec. Mauris lobortis justo scelerisque nisi gravida, sit amet tempor nisl tempus. Curabitur turpis augue, mattis vitae lacinia dapibus, interdum eu nisi. Vestibulum tempor enim id tortor ultricies sodales. Etiam scelerisque convallis tortor tempus congue. Curabitur in pellentesque elit.

Cras efficitur purus placerat neque placerat fringilla. Mauris viverra eros elit, accumsan tempor sem dictum quis. Maecenas fermentum congue accumsan. Sed nulla purus, iaculis a volutpat eu, pulvinar quis dolor. Nullam posuere lectus a nisi lobortis facilisis. In id metus sed enim maximus placerat. Duis euismod, arcu eu porttitor lacinia, mi enim aliquet enim, eu interdum ex nulla sit amet eros. Cras accumsan at magna tempus iaculis. Pellentesque sollicitudin accumsan tortor, pretium euismod tellus varius quis. Mauris at nunc nec quam luctus feugiat et et nisi. Donec tempus tristique viverra. Nulla augue mi, porta a interdum at, pretium eget neque. Maecenas eleifend, nunc vitae mollis condimentum, nulla arcu mollis mi, sed luctus enim orci at tortor. Vestibulum nisl ligula, feugiat vestibulum diam ut, maximus malesuada eros.

Mauris suscipit dui lectus, at gravida erat consequat a. Etiam dapibus neque vel interdum rhoncus. Maecenas fermentum, magna at tincidunt volutpat, urna enim pharetra velit, id gravida justo nunc quis turpis. Vivamus ut tortor non turpis tincidunt cursus. Curabitur diam metus, vulputate sit amet felis accumsan, porta cursus velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec sapien turpis, molestie eu libero id, dignissim luctus magna. Donec venenatis efficitur molestie. Integer facilisis sapien justo, eu aliquam nulla consequat sed. Praesent nisi mauris, pharetra quis varius id, dictum ac dolor.

Suspendisse vel purus non ex condimentum placerat. Sed id elementum nisl. Fusce semper accumsan accumsan. Suspendisse in eleifend augue. Sed vel neque fringilla, tincidunt sapien nec, aliquet magna. Phasellus vel mauris sit amet est porttitor porta. Vivamus semper mauris ut neque vestibulum, eget lacinia risus varius. Sed rutrum auctor sapien, et dignissim nunc tristique sed. Fusce rutrum molestie turpis ac bibendum.
				
</div>

关于jquery - Readmore.js定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38805074/

相关文章:

javascript - 如何在 .append 输入字段上显示来自 DB 的数据

javascript - Jquery Paginate 将项目放在第二页上,并且列表上没有限制,因此实际上并不分页

javascript - ng-bind 用作文本区域的指令,但不用作输入标签

javascript - 嵌套在多个 DIV 和 PHP 代码中的 jQuery 选择器

html - 如何去除视差内部滚动条

jQuery 动画无法在悬停时工作

Javascript - 如何获得更多的文本语音转换声音?

javascript - 在 django 模板中打开链接内容

html - 在 html 和 css 中使线条到达左边框

html - 如何去掉带下划线的链接