1

www.cssgrid.netのCSSグリッドシステムに基づく単純なphp/html/cssサイトのコーディング

セクションヘッダーと同じ行display: inlineに「トップに戻る」リンクを印刷できるようにヘッダーを設定しました。このような：

<h2 id="section1">Section 1</h2>
<a href="#top" class="scroll small">Back to top</a>

これは次のようにレンダリングされます（Stackoverflowはこれをサポートしていないため、太字のテキストがヘッダーであると想像してください）

セクション1 トップに戻る

これはすべて問題なく、ダンディです。私が望むように、問題は、ヘッダーを使用する他の場所、たとえば次のコンテキストで発生します。（これは天気やCSSグリッドテンプレートを使用しないための質問ではなく、ヘッダーに関する質問であることに注意してください。したがって、一般的な構造に関するコメントは控えてください）。

<div class="container" id="main">
    <div class="row">
        <div class="eightcol" id="first-div">
            <h1>This is a header</h1>
            <p>This is a p-tag</p>
        </div>
        <div class="fourcol last" id="second-div">
            <div id="twitter">
                <p>Twitter here</p>
            </div>
        </div>
    </div>
</div>

これは、少なくとも私が望むものによれば、正しくレンダリングされません。これは、次のモックアップが示すようにレンダリングされます。

main
--------------------------
| first-div | second-div |
| This is a header       |
| This is a | Twitter    |
| p-tag     | here       |
--------------------------

おそらく最も芸術的なASCIIレンダリングではありませんが、ポイントは、ヘッダーがその隣に浮かぶdivの領域に拡張されることです。

含まれているdivでラップさせるにはどうすればよいですか？

編集： 私はコードでフィドルを作成しましたが、エラーは発生しません。何が起こっているのか分かりません。http://jsfiddle.net/nefGZ/

4

2 に答える 2

2

私は問題を発見したと信じています。

Chrome でヘッダーを調べると (HTML として編集)、次のようになります。

<h1>HEJ&nbsp;och&nbsp;välkommen&nbsp;till&nbsp;Basårsmottagningens&nbsp;hemsida!</h1>

&nbsp;ワードラップを妨げているのはすべてです。

質問の作成者による編集: 特に PDF や Word から貼り付ける場合は、コピーを貼り付けたテキストを常に確認してください。

于 2012-08-01T17:15:45.893 に答える
0

置く

表示: インラインブロック

H1のスタイル、そして私はあなたが大丈夫だと思います

于 2012-08-01T16:41:24.083 に答える