css - 分离和对齐标题和段落元素的最佳方法

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 元素上，应用 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 */