我希望文本从顶部开始,图像也从那里开始。这是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>
答案 0 :(得分:1)
添加到您的CSS vertical-align:top; float:left;
img{
height:150px;
vertical-align:top;
float:left;
}
&#13;
<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>
&#13;