<p> тег не работает в <div> - PullRequest
Новая
       42

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

0 голосов
/ 09 марта 2012

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

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

Ответы [ 2 ]

0 голосов
/ 09 марта 2012

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

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 уже "установлена"external 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, поскольку программа чтения с экрана не сможет прочитать изображение вслух.

0 голосов
/ 09 марта 2012 
 <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%;
}
...