Question

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

我能找到的唯一解决方案是回复博客文章（“将图像浮动到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;
}

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

Answer 1

您使用#表示id。您应该.使用class，如下所示：

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

Answer 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.

将图像浮动到CSS <h3>标记</h3>下面的文本右侧

2 个答案: