CSS和放置图像旁边的文本

时间:2015-10-09 04:28:07

标签: css image text alignment

我有一些文字和图片,我想将文字放在图像的右侧。 我已经使图像浮动,但问题是我只想将第一行放在图像旁边。 我希望文本的其余部分保留在图像下,就像你关闭浮动一样。

网址示例: http://salient.peterstavrou.com/5937-2/

我有以下代码:

.audiodownload {
  width: 120px !important;
  float: left;
}

我在页面中使用WordPress和HTML是:

 <h2>Good Audiobook</span></h2>

  Click on the image below to see if the Audiobook is available.
 <a href="https://www.youtube.com/results?search_query=The+7+Habits+of+Highly+Effective+People+audiobook" target="_blank"><img class="audiodownload" src="http://www.peterstavrou.com/wp-content/uploads/2015/10/YouTube-MP3-Audio.jpg" alt="Audiobook Download" /></a>
 If the Audiobook is available then you can download it to your computer as an .mp3 audio file by following these instructions
&nbsp;

The 7 Habits of Highly Effective People is recognized as one of the most influential audiobooks ever recorded. In this Audiobook Stephen R. Covey presents a holistic, integrated, principle-centered approach for solving personal and professional problems. 
With penetrating insights and pointed anecdotes, Stephen Covey reveals a step-by-step pathway for living with fairness, integrity, honesty and human dignity - principles that give us the security to adapt to change, and the wisdom and power to take advantage of the opportunities that change creates.

1 个答案:

答案 0 :(得分:2)

在段落的样式中,您希望在图像下方使用:

p {
    clear: both;
}

指定的p元素的左侧或右侧不允许浮动元素。来自http://www.w3schools.com/cssref/pr_class_clear.asp