html - タグが機能しない

Question

「写真に戻る」リンクに合わせてページの右上に「招待状」という単語を追加しようとしています。ただし、新しい段落を追加してから段落<div>を開始する<p>と、CSS を適用すると、段落がページに正しく配置されません。

問題が発生しているページをアップロードしました: http://ashliamabile.com/invitations.html

Answer 1

これは私のために働いた：

HTML:

<div id="backtophotos">
    <a href="print.html"><img src="images/backprint.png" border="0"></a>
    <p class="title">invitations</p>
</div>

CSS:

/*Drop the width property and set div to position:relative */

#backtophotos {
    height: 20px;  /* removed width */
    background-repeat: no-repeat;
    margin: 0 0 0 100px;
    position: relative;  /* set positon to relative */
}

/* Set title p to position absolute and remove margins: */

.title {
    position: absolute;
    right: 0;
    top: 0;
    margin: 0;
}

上記は、div の幅が外側の div によって既に「設定」されているため機能するため、レイアウトを変更した場合に右上隅が実際にどこにあるかを気にするだけで済みます。それ以外の場合は、フロートなしの右揃えのヘッダー。

また、マージンを明示的に0に設定した唯一の理由.titleは、p要素に上下のマージンが設定されているためです（そして、行の高さだと思います）。pを a に変更した場合div(選択したもので、 apはより明示的にテキストを意味する値を持っています)、.titleルールは次のようになります。

.title {
    position: absolute;
    right: 0;
    top: 0;
}

これは、追加のトリックや微調整なしで、まさにあなたが探しているものです (これは私のハロウィーン ラップ アルバムの名前です)。

個人的には、実際には次のようなものを使用します。

<div id="backtophotos">
    <h2><a href="print.html">back to print</a><h2>
    <h2 class="title">invitations</h2>
</div>

上記が最もセマンティックであるため、デフォルトのブラウザー css をすべてクリアします。CIRまた、スクリーン リーダーは画像を読み上げることができないため、「印刷に戻る」テキストには画像を使用せず、多くの方法のいずれかを検討することをお勧めします。

Answer 2

 <div id="backtophotos">
   <a href="print.html"><img src="images/backprint.png" border="0"></a>
   <p>invitations</p>
 </div>

CSS

#backtophotos p{
  float:right;
} 
#backtophotos a{
   float:left;
}
#backtophotos{ /*Clear float : any one of this method - micro clearfix, clearfix,  overflow method, float, clear both */ 
  overflow:hidden;
  width:100%;
}