0

http://jsfiddle.net/Yn7e7

何らかの理由で、".ep" div は".heading" コンテナーでのみ1 ピクセル幅が広すぎるため、ヘッダーが次の行に流れてしまいます。「#contents」div に入れ、まったく同じ構造を持ち、「.heading」div とまったく同じ CSS を使用する、php 経由で動的に生成されたコンテンツの場合、正しく表示されます。HTML/CSS を W3C で検証しました。何を与える？

より堅牢な例については、私が取り組んでいるプロジェクトを参照してください。

以下のコード（クリックしたくない人のために）。

HTML:

<body>
    <div class="container">
        <div class="container toolbar">
            <div class="search"></div>
        </div>
        <div class="container heading">
            <div class="sid"><p>Show ID</p></div>
            <div class="network"><p>Network</p></div>
            <div class="title"><p>Title</p></div>
            <div class="ep"><p>Episode</p></div>
        </div>
        <div id="contents">
            <div id="loading" style="display: none">
                <img src="assets/img/loading.gif" alt="loading" />
            </div>
        </div>
    </div>
</body>

CSS:

html, body {
    min-height: 100%;
}
body {
    font-family: 'Open Sans', helvetica, arial, sans-serif;
}
.container p {
    margin: 0;
}
#contents {
    margin-top: 8em;
}
#contents #loading {
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
}
.toolbar {
    position: fixed;
    top: 0;
    background: #ccc;
    color: #000;
    margin: 0;
    line-height: 5em;
}
.toolbar > div {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.heading {
    position: fixed;
    top: 5em;
    font-weight: bold;
    background: #00f;
    color: #fff;
    margin: 0;
}
.heading > div {
    display: inline-block;
    padding: 0;
    margin: 0;
}
.heading p {
    padding: 0;
    line-height: 3em;
}
.sid {
    width: 10%;
}
.network {
    width: 25%;
}
.title {
    width: 50%;
}
.ep {
    width: 15%;
}
4

2 に答える 2

1

問題は、見出しの子 div のインライン ブロックです。inline-block は、要素をインラインとして表示しますが、ブロック レベル要素の配置機能を保持します。これは、空白がインライン要素として扱われることを意味するため、各 div 間の改行はスペースとしてレンダリングされ、幅が失われます。

空白を取り除くか、インライン ブロックの代わりにフロートを使用してください。

于 2013-07-24T20:47:41.813 に答える
0

div 間のスペースを削除してみてください。

<div class="container heading"><div class="sid"><p>Show ID</p></div><div class="network"><p>Network</p></div><div class="title"><p>Title</p></div><div class="ep"><p>Episode</p></div></div>

また

<div class="container heading"><!--
    --><div class="sid"><p>Show ID</p></div><!--
    --><div class="network"><p>Network</p></div><!--
    --><div class="title"><p>Title</p></div><!--
    --><div class="ep"><p>Episode</p></div><!--
--></div>
于 2013-07-24T20:44:53.757 に答える