1

我不确定其他人是否遇到过这个问题。我正在尝试将图像放在标题下方（以及段落上方）并将其浮动到文本的右侧，并在图像左侧放置 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;
}

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

4

2 回答 2

1

您正在使用#which 表示id. 你应该使用.for class，像这样：

.pic {
float: right;
margin-left: 10px;
border: 4px solid #FFF;
}
于 2013-04-23T09:11:50.850 回答
0 
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.
于 2013-04-23T20:47:46.560 回答