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

display: inline;属性を使用したくありません。基本的に、2 つのブロックレベルの要素を隣り合わせに「浮かせ」ようとしています。これを行うには、次のようなことを試してください。

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

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

より多くのCSS-fuを持つ誰かがこれに対する標準的な解決策を提供できると確信していますが、これは私がいつも行ってきたことです. ウィンドウをスケーリングすると、サイズが適切に変更されるはずです。

于 2013-02-04T18:11:18.260 に答える
0

フロートを追加h2

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

jsfiddle

于 2013-02-04T18:10:41.057 に答える