Question

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

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

Answer 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/

Answer 2

在h2

中添加了浮动

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

jsfiddle

Answer 3

您不希望使用display: inline;属性。从本质上讲，您试图将两个块级元素“浮动”在一起。为此，请尝试以下方法：

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

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

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

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

3 个答案: