ホワイトスペースの素晴らしい使い方:nowrap_html/css_WEB-ITnose

複数の要素が同じ行にあるレイアウトでは、カルーセルがより一般的です。以下では、このレイアウトを行う方法について説明します:
まず、次のように HTML の結果に同意します:

div.row  div.col  div.col  div.col  ...

方法 1:

div.row の幅を div.col width * div.col の数に設定し、そして次に div を設定します。col は float:left または display:inline-block です
float:left の場合、div.row は float をクリアする必要があります。
display:inline-block の場合、HTML を圧縮するか、div.row に font-size:0 を設定して、div.col 間の水平方向のギャップを削除する必要があります。ちなみに、後者は垂直方向のギャップも削除します。相対単位の場合、最終値は行の高さの値 * フォントのサイズです)。前者の場合、まだ除去されていない垂直方向のギャップが存在します。div.col にはvertical-align:top を、div.row には line-height:0 を設定できます。 div.col の高さが等しくない場合、上に合わせて整列されるため、前者 (つまり、垂直整列) を推奨します。 もちろん、下または中央を使用することもできます。さらに、div.col に inline 要素または inline-block 要素が含まれている場合、div.col はその子要素の inline/inline-block 要素の最後の行のベースラインに従って垂直方向に整列されます (vertical-align のデフォルト値はベースライン）。したがって、div.col の垂直方向の配置を明示的に設定することが最善です。

ベースライン

水平方向と垂直方向のギャップ

その子要素のinline/inline-block要素の最後の行のベースラインに従って垂直方向に整列します

これは、Zhang Xinxu先生の「 CSS の徹底理解」 この記事では、vertical-align と line-height の関係について説明します。 inline-block 要素に inline 要素がない場合、またはオーバーフローが表示されない場合、要素のベースラインは一番下になります。それ以外の場合、ベースラインは要素内のインライン要素の最後の行のベースラインになります。

補足: line-height の値は number と percentage

の差です

percentage は現在の要素のフォントサイズ * パーセントであり、計算された値は子孫要素 (固定値、子孫) に継承されます要素はこの値を使用します) ; 数値は子孫要素のフォント サイズ * 数値 (相対値、子孫要素は独自のフォント サイズに基づいて適切な行の高さを計算します)。詳しくは「CSSの行の高さ属性を徹底理解する」をご覧ください。

もちろん、div.row に inline 要素または inline-block 要素がある場合、それらは親要素の font-size と line-height を継承するため、オーバーライドするには font-size と line-height をリセットする必要があります。対応する div.row 値。

方法 1 の例は、淘宝網ホームページのメイン カルーセル (子要素を介してフローティングし、フローティング親要素をクリアする) です。
このアプローチの利点は次のとおりです: ①優れた互換性。浮動要素は常に現在の行ボックスの上部に位置合わせされ、垂直方向の位置合わせは無効であるため、div.col 間のギャップを直接クリアする必要がありません。
悪い点: div.row の幅を計算する必要があります。

方法 2 (これも私が話したい賢いことです)

コードを直接入力します:

*{    margin: 0;    padding: 0;}.row{    white-space: nowrap; // 让div.col放置在同一行    background-color: rgb(0,0,0); // 背景色，以方便观察    font-size: 0; // 去除水平+垂直间隙}.col{    display: inline-block;    *display: inline; // 兼容IE 6/7，模拟inline-block效果    *zoom: 1; // 兼容IE 6/7，模拟inline-block效果    width: 20%;     margin-right: 30px;    height: 100px;    background-color: red;    font-size: 14px; // 覆盖父元素的font-size    vertical-align: top; // 向上对齐，同时去除垂直间隙}

黒い背景は div.row、赤い背景は div.col です。

これは、white-space:nowrap が適用されたテキスト コンテナと同じ効果があることがわかります。

2 番目の方法の利点は次のとおりです:

①互換性が良い (IE5 ではすべて正常)、幅を計算する必要がなく、複数の div.col を自由に配置でき、div.row の幅は親要素の幅 (ただし、IE6 では div.row が大きくなります。IE6 では、幅は min-width と同じ効果があり、高さも同様です)。

IE5 での効果は IE6 でも同じはずです。

他にアイデアがある場合は、コメントでお知らせください。

github-JChehe。