Question

我正在尝试创建如下所示的xhtml部分。 Profile是'h2'元素，右边的段落是'p'元素。我希望将'p'文本保留在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!
_________________________________________________________________

实际上是什么

_________________________________________________________________

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元素上，应用overflow：hidden。文本将保留在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;
}

<强>小提琴

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

Answer 3

您也需要float段落，并将overflow:hidden应用于section标记。在这里小提琴：http://jsfiddle.net/x2Kge/

分隔和对齐标题和段落元素的最佳方法

3 个答案: