无法使用多行换行对齐标题旁边的段落

What I want is to have a heading (h2) aligned left with some text (p) to the right of the heading. Paragraph text should also wrap when window is re-sized so that it uses any available space next to the heading. What happens now is the smaller paragraph text wraps under heading leaving a large gap.

我想要的是左侧标题（h2）与标题右侧的一些文本（p）对齐。当窗口重新调整大小时，段落文本也应该换行，以便它使用标题旁边的任何可用空间。现在发生的是较小的段落文本包装在标题下留下了很大的差距。

Here's a jsfiddle. You will see that text with grey background wraps right under heading leaving a large gap. I want the paragraph to wrap under itself as long as there is enough space.

这是一个jsfiddle。您将看到带有灰色背景的文本在标题下方包裹，留下较大的间隙。只要有足够的空间，我希望段落在自身下面。

In case jsfiddle isn't available heres the code:

如果jsfiddle不可用继承代码：

HTML:

HTML：

<section>
<div>
    <h2>Contact Me</h2>
    <p>You can Contact Me at sample@smaple.com or use the contact form below:</p>
</div>
</section>

CSS:

CSS：

section{
    background-color:#CCC;
    width:100%;
}
section div{
    background-color:#39F;
    border-bottom:3px solid #333;
}
section div h2{
    font-family:helveticaInserat;
    font-size:2.6em;
    display:inline;
    background-color:red;
}
section div p{
    font-family:helveticaInserat;
    background-color:#CCC;
    display:inline;
    vertical-align:top;
    line-height:1em;
}

How can this be achieved keeping in mind that all text will be dynamic and it need to wrap when there is little space available?

如何实现这一目标，记住所有文本都是动态的，并且当空间不足时需要包装？

3 个解决方案

#1

section div h2 {
    font-family:helveticaInserat;
    font-size:2.6em;
    float: left;
    background-color:red;
}
section div p {
    font-family:helveticaInserat;
    background-color:#CCC;
    vertical-align:top;
    line-height:1em;
}

http://jsfiddle.net/Z9A32/2/

#2

Added float left in h2

在h2中添加了浮动

section div h2{
        font-family:helveticaInserat;
        font-size:2.6em;
        background-color:red;
        float:left;
    }

jsfiddle

的jsfiddle

#3

You don't want to be using the display: inline; attributes. Essentially, you're trying to "float" two block-level elements next to each other. To do so, try something like this:

你不想使用显示：inline;属性。从本质上讲，你试图将两个块级元素“浮动”在一起。为此，尝试这样的事情：

 section div h2{
     width: 45%;
     float: left;
 }

 section div p{
     width: 45%;
     float: left;
 }

I'm sure someone with more CSS-fu will be able to give a canonical solution for this, but this is what I've always done. It should resize nicely as you scale the windows.

我敢肯定有更多CSS-fu的人能够为此提供一个规范的解决方案，但这是我一直以来所做的。在缩放窗口时应该很好地调整大小。

#1

section div h2 {
    font-family:helveticaInserat;
    font-size:2.6em;
    float: left;
    background-color:red;
}
section div p {
    font-family:helveticaInserat;
    background-color:#CCC;
    vertical-align:top;
    line-height:1em;
}