4

私は画像と情報のかなり複雑なグリッドを作成しようとしています（ほとんどPinterestのように）。具体的には、一組一組を次々とインライン配置しようとしてい<ul>sます。私はそれを機能させていますが、1つの側面が問題を引き起こしているので、問題全体の複雑さを避けるために、この小さな部分について質問しようとしています。

画像とその情報を水平方向に揃えるために、画像<li>s内の他のインラインブロックレベルの要素とインラインで使用しています。<li>s高さがほとんどないことを除いて、ほとんどすべてが正しく機能します。

HTMLとCSSは、以下に加えてそれをいじりたい場合は、ここでJSFiddleにあります。

HTML：

<div>
<ul class="Container">
    <li>
        <span class="Item">
            <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
            <span class="Info">
                <a href="#">Title One</a>
                <span class="Details">One Point One</span>
            </span>
        </span>
    </li>
    <li>
        <span class="Item">
            <a href="#"><img src="http://jsfiddle.net/img/logo.png"/></a>
            <span class="Info">
                <a href="#">Title Two</a>
                <span class="Details">Two Point One</span>
            </span>
        </span>
    </li>
</ul>

CSS：

.Container {
    list-style-type:none;
}
.Container li {
    background-color:grey;
    display:inline;
    text-align:center;
}
.Container li .Item {
    border:solid 2px #ccc;
    display:inline-block;
    min-height:50px;
    vertical-align:top;
    width:170px;
}
.Container li .Item .Info {
    display:inline-block;
}
.Container li .Item .Info a {
    display:inline-block;
    width:160px;
}

jsfiddleリンクで結果を確認すると、灰色の背景には全体の小さなストリップしか含まれていないことがわかります<li>。<li>を変更してこの問題を解決することは知っていdisplay:inline-blockますが、他の理由でそれは実現可能ではありません。

ですから、まず、インライン<li>要素に高さがない理由を誰かが理解しているかどうかを確認するだけです。これを説明する仕様には何も見つかりません。インライン要素に高さを追加できないことは知っていますが、なぜこれが発生しているのかについての説明があれば、修正できる可能性があります。

次に、IEの開発者モードを使用して要素を検査すると、背景色は正しい場所にあり<li>'sますが、要素にカーソルを合わせると、バウンディングボックスの実際の場所はコンテナの下部にあることがわかります。この問題がすべてのブラウザの一番上にあれば対処できますが、明らかに異なります。

注：この場合、古いブラウザはあまり気にしませんが、HTML5またはJavaScriptのポジショニングは使用しません。

ありがとう。

4

2 に答える 2

6

インライン要素には、を設定するオプションがありませんheight。インライン要素は、線上にある要素であるため、線の高さを継承します。ブロック要素は、全幅を占める要素であり、幅、高さ、およびスタイリングを容易にするその他のものを割り当てることができます。

仕様の詳細な説明については、 http ：//www.w3.org/TR/CSS2/visuren.html#inline-formattingを参照してください。

inline-blockheight要素をインラインで表示しますが、要素に割り当てることができ、widthその中のコンテンツとともに展開されます。IEでのバグのある動作のため、あまり頻繁には使用しませんでしinline-blockたが、当時は明らかに終わりました： http ://www.quirksmode.org/css/display.html

使用することでこれは解決<li>しinline-blockますが、これは選択肢ではないとあなたは言います。なぜだめですか？別の解決策は、それらのliのブロック要素を作成し、それらを左にフロートさせることです。コンテンツの重複に問題がある場合は、ul全体のoverflowプロパティを使用して、ulが他のコンテンツをプッシュダウンしていることを確認してください。

ul.Container {
  list-style-type: none;
  overflow: hidden; /* so height expands with the floated content */
}

ul.Container li {
  display: block;
  float: left;
  ... more styling ...
}

これはあなたのパズルを解くものですか？

于 2012-07-10T21:38:39.573 に答える
3

CSS 2.1仕様の関連ビットは、セクション10.6.1セクション10.6のインラインの置換されていない要素です。高さとマージンの計算。それは言う：

'height'プロパティは適用されません。コンテンツ領域の高さはフォントに基づく必要がありますが、この仕様ではその方法は指定されていません。UAは、たとえば、em-boxまたはフォントの最大のアセンダーとディセンダーを使用できます。（後者は、em-boxの上または下の部分を持つグリフがコンテンツ領域内にあることを保証しますが、フォントごとに異なるサイズのボックスにつながります。前者は、作成者が「行の高さ」に対して背景のスタイルを制御できることを保証します。 、ただし、コンテンツ領域の外側にグリフがペイントされることになります。）

要素はインラインでスタイル設定され、その<li>コンテンツは行にまたがることができない単一のインラインブロックオブジェクトであるため、のコンテンツ領域の<li>高さは1行のみです。したがって、のコンテンツ領域の高<li>さは1 xf（フォントの高さ）です。フォントの高さを増やすと灰色の領域が大きくなるデモについては、http：//jsfiddle.net/dh8nU/1/を参照してください。

セクションは続けて言います：

インラインの置換されていないボックスの垂直方向のパディング、境界線、および余白は、コンテンツ領域の上部と下部から始まり、「行の高さ」とは関係ありません。ただし、ラインボックスの高さを計算するときは、「line-height」のみが使用されます。 [私の強調]

より大きなインラインブロック要素をインライン要素に配置すると、ラインボックスの高さが増加してインラインブロック要素が含まれますが、上記のテキストのように、これによって含まれるインライン要素の高さが増加することはありません。

于 2012-07-10T23:28:19.510 に答える