<h3> 标签下方 CSS 中文本右侧的浮动图像答案

【问题标题】：Floating images to the right of text in CSS below <h3> tags<h3> 标签下方 CSS 中文本右侧的浮动图像
【发布时间】：2013-04-23 09:04:51
【问题描述】：

我不确定其他人是否遇到过这个问题。我正在尝试将图像放在标题下方（以及段落上方）并将其浮动到文本的右侧，并在图像左侧放置 10px 的边距。在我的 CSS 样式表中，我已经清楚地选择了图像并应用了“浮动：右”属性，但是当我刷新网页时，图像似乎仍然停留在标题下方的左侧。

我能找到的唯一解决方案是响应博客文章（'在 H3 标记旁边浮动图像'），它建议在图像代码之后向 HTML 添加规则。但这违背了 CSS 的全部意义。如果我想在我网站的多个页面上应用此规则怎么办？

我的 HTML 如下：

<!DOCTYPE HTML>
  <html>
    <head>
      <link rel="stylesheet"href="css/style.css" type="text/css" media="screen">
    </head>
    <body>
      <div id="header" class="grid_11">
        <h1>Birthdays<h1>
        <h2>Perfect Fun-Philled Events<h2>
      </div>

      <div id="content">
      <div class="post">
        <img src="img/birthday cookie.jpg" class="pic">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo imperdiet libero, id dapibus lorem viverra sit amet. Phasellus eleifend diam a erat viverra nec sodales orci feugiat Maecenas molestie nisl at erat lobortis commodo non nec lectus.</p>
        <p><a href="http://3.bp.blogspot.com/_rwCJzc5dlWA/TPV7v1QQZsI/AAAAAAAAAjk/MgRY11AGuBA/s1600/PA300421.JPG">Original photo available here. </a></p> 
      </div>
    </body>
  </html>

以及对应的CSS：

#content {
    float: left;
    width: 700px;
    margin-right: 20px;
}

#content .post {
    background: #FFF;
    padding: 10px;
    margin-bottom: 20px;
    border: 4px solid #DA6;
    color: #420600;
}

#content .post h3 {
    margin: 0;
    color: #420600;
}

#pic {
    float: right;
    margin-left: 10px;
    border: 4px solid #FFF;
}

如果有人有任何建议，我将不胜感激！

【问题讨论】：

您的 CSS 定义了 ID 为 pic #pic 的项目的样式，但您已经定义了类 pic。这意味着您必须在 CSS 样式表中使用 .pic

标签： html css css-float

【解决方案1】：

您使用的是#，它表示id。您应该使用. 代替class，如下所示：

.pic {
float: right;
margin-left: 10px;
border: 4px solid #FFF;
}

【讨论】：

【解决方案2】：

you can change the Image tag to

<img src="img/birthday cookie.jpg" id="pic"  alt ="alternate text" />

if you not use this any where in the page then it's better to use id than class  and always use alt tag to image.

【讨论】：

这并不能真正回答与样式表相关的原始问题。