лучший способ разделить и выровнять элементы заголовка и абзаца

Question

Я пытаюсь создать раздел xhtml, как показано ниже. Профиль является элементом «h2», а параграф справа является элементом «p». Я хочу, чтобы текст «p» обертывался ниже профиля.

Что я хочу, чтобы это выглядело как

_________________________________________________________________ 

Profile '  paragraph goes here...some text some text 
        some text some text. this text will stay in 
        its own section and not wrap around Profile! 
_________________________________________________________________ 

Что это на самом деле выглядит

_________________________________________________________________ 

Profile '  paragraph goes here...some text some text 
        some text some text. this text will stay in 
its own section and not wrap around Profile! 
_________________________________________________________________ 

Ниже приведен код, который я в настоящее время.

XHTML

<div class="section"> 
      <h2>Profile</h2> 
      <p>This will have some information in it!</p> 
    </div> 

CSS

.section {border-bottom: 1px solid #0000A0;} 
.section h2{ float:left; padding-left: 1em; padding-right: 1em; } 

Я пробовал много подходов, но это, кажется, самым близким. Пожалуйста, дайте мне знать, если я пойду в правильном направлении.

Answer 1

На вашем элементе P примените переполнение: скрыто. Текст останется в контейнере p без переполнения под элементом h2.

Ваш CSS

.section {border-bottom: 1px solid #0000A0;} 
.section h2{ float:left; padding-left: 1em; padding-right: 1em;} 
.section p{overflow:hidden;} /* addded this line */ 

Answer 2

HTML

<div class="section"> 
     <h2>Profile</h2> 

     <p> paragraph goes here...some text some text 
        some text some text. this text will stay in 
      its own section and not wrap around Profile! 
     paragraph goes here...some text some text 
        some text some text. this text will stay in 
      its own section and not wrap around Profile!</p> 
    </div> 

CSS

.section { 
    border-bottom: 1px solid #0000A0;} 
.section h2{ float:left; padding-left: 1em; padding-right: 1em; } 
.section p 
{ 
    overflow:hidden; 
} 

Fiddle

http://jsfiddle.net/WPgt9/25/

Answer 3

Вы должны float абзац тоже, и применить к overflow:hiddensection тега. Fiddle здесь: http://jsfiddle.net/x2Kge/