Тег<p>не работает в <div>

Я пытаюсь добавить слово "Приглашения" в правом верхнем углу страницы, выровненной по ссылке "Вернуться к фотографиям". Тем не менее, когда я добавляю новый <div> затем начать <p> после того, как я применю CSS, абзац не будет правильно выровнен по странице.

Я загрузил страницу, где у меня возникли проблемы: http://ashliamabile.com/invitations.html

Источник

2 ответа

Решение

Это сработало для меня:

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 к div (ваш выбор и p имеет определенную ценность более явно для текста), то ваш .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 методы там, так как программа чтения с экрана не сможет прочитать изображение вслух.

Источник 
 <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%;
}
Источник
Другие вопросы по тегам