1

他の誰かがこの問題を抱えているかどうかはわかりません。見出しの下 (および段落の上) に画像を配置し、テキストの右側に浮かせて、画像の左側に 10 ピクセルの余白を配置しようとしています。私の CSS スタイルシートでは、画像を明確に選択して 'float: right' プロパティを適用しましたが、Web ページを更新すると、画像が見出しの下の左側に残っているように見えます。

私が見つけることができる唯一の解決策は、ブログ投稿 (「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

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 に答える