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

【问题标题】：Can't align paragraph next to heading with multi-line wrap无法使用多行换行对齐标题旁边的段落
【发布时间】：2013-02-04 18:03:24
【问题描述】：

我想要的是将标题 (h2) 与标题右侧的一些文本 (p) 对齐。重新调整窗口大小时，段落文本也应该换行，以便它使用标题旁边的任何可用空间。现在发生的情况是较小的段落文本在标题下换行，留下很大的间隙。

这是jsfiddle。您将看到带有灰色背景的文本在标题下方环绕，留下很大的间隙。只要有足够的空间，我希望段落能够自动换行。

如果 jsfiddle 不可用，代码如下：

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：

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;
}

如何做到这一点，记住所有文本都是动态的，并且在可用空间很小时需要换行？

【问题讨论】：

标签： html css text word-wrap text-alignment

【解决方案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/

【讨论】：

关闭，但是有没有办法让段落也垂直居中？为什么边框对齐段落而不是最高元素（h2）？
我希望段落 (p) v 居中，例如，如果我只有 1 行文本，它将位于父 div 的中心。
如果没有 JS，垂直居中有点困难。顶部段落的填充会起作用吗？ jsfiddle.net/Z9A32/5
这几乎可以工作，但如果没有空间让文本不换行，我希望它对齐顶部。我对 js 没问题，只要在没有启用 js 的情况下它会恢复到 align-top。
好的，我已经解决了边界问题，见jsfiddle.net/Z9A32/9。关于垂直居中的js解决方案有什么想法吗？

【解决方案2】：

在h2中添加了左浮动

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

jsfiddle

【讨论】：

【解决方案3】：

您不想使用display: inline; 属性。本质上，您是在尝试将两个块级元素“浮动”在一起。为此，请尝试以下操作：

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

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

我相信拥有更多 CSS-fu 的人将能够为此提供一个规范的解决方案，但这是我一直在做的事情。当您缩放窗口时，它应该很好地调整大小。

【讨论】：

是的，它会调整大小但不会换行（都将保持在 1 行）