0

我想要的是有一个标题（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;
}

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

4

3 回答 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/

于 2013-02-04T18:07:44.437 回答
0

添加浮动留在h2

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

jsfiddle

于 2013-02-04T18:10:41.057 回答
0

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

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

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

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

于 2013-02-04T18:11:18.260 回答