7

「生徒」ごとにdivを含む「教室」用のdivが1つあります。各「学生」divには画像が含まれています。HTMLは次のとおりです。

<div class="classroom">
    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg">
    </div>

    <div class="student">
        <img class="student-image" src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg">
    </div>
</div>

すべての「学生」divを1行で表示したいので、次のcssを使用します。

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}

.classroom {
    position: relative;
    height: 100%;
}

.classroom .student {
    position: relative;
    height: 100%;
    float: left;
}

.classroom .student .student-image {
    height: 100%;
}

生徒が「教室」のdivに十分な場所を確保するために、「教室」の幅を計算するためにjQueryを使用します。

$(document).ready(function() {
    var w = 0;
    $(".student").each(function() {
        w += $(this).width();
    });
    $(".classroom").width(w);
});

残念ながら、結果は私が期待したものではありません。最後の「学生」divは次の行に移動します（float: left;割り当てられていないかのように）。さらに奇妙なことに、「Classroom」divの幅を1ピクセルに増やすと、divは最初の行の終わりの位置に戻ります。
私はそれらのjsfiddlesを作成しました：ここhttp://jsfiddle.net/U3gBGで問題を見ることができます。結果パネルをクリックし、矢印キーを使用して上下にスクロールします。
ここhttp://jsfiddle.net/U3gBG/1/では、計算後に「classroom」divの幅に1を加算した結果を確認できます（「classroom」の幅は「students」の幅の合計に1を加えたものに等しくなります）ピクセル）。この結果が私に必要なものです。
親divの幅を1増やす必要があるのはなぜですか？すべての子div幅を合計するだけでは不十分なのはなぜですか？

4

4 に答える 4

0

IE9のデバッグ画面でこれを見ると、div要素とimage要素を調べましたが、最初の画像の幅は999.95であり、丸められた数値ではないようです。他の2つの画像もそれぞれ整数以外の幅の値を持っています。

一部のブラウザはこの数値を切り上げ、一部は切り下げます。そのため、他の回答で提案されているようにcssを使用するか、または単に+1ピクセルを追加するか、parseint（を使用できます。 ）関数またはある種の切り上げ関数を使用して、画像に親divに十分なスペースがあることを確認します。

編集：

問題はのcss値に起因すると思いますheight: 100%。これは、幅が計算され、実際の画像サイズに固定されていないため、ピクセル単位の幅の整数値ではないため、この画像配置方法を引き続き使用するには、math.ceil()親divの合計幅を合計するときは、またはその性質のものを使用する必要があります。

于 2012-12-01T02:53:06.527 に答える
0

それで、Eyalのコメントに基づいて、私はこの問題の根本で何が起こっているのかについて興味を持ちました。私のシステムでは、Chromeがラップされていることに気づきましたが、IEとFFはラップしていませんでした。さらに掘り下げてみると、ラッピングはレンダリングされた画面領域によるものであることがわかりました。

jQueryを使用して親のサイズを設定していますが、3で割ると、四捨五入されます。場合によっては、切り下げると、コンテナが画像に対して狭すぎて、3番目が折り返されます。切り上げた場合は、十分なスペースがあり、ラッピングは発生しません。

以下に投稿したソリューションは、ブラウザーのサイズ変更時に自動的に再計算されるため、より堅牢な回答です。JSでこれを処理するには、jsを常に実行し、サイズ変更イベントを監視する必要があります。お役に立てば幸いです。

javascriptを使用する代わりにCSSを使用できますか？

に設定studentしdisplay:inlineます。次に、に設定parentしwhite-space:nowrapます。彼らは包みません。次に、画像間の空白を処理する必要があります。これinlineで、HTML内の任意の空白に設定したため、ギャップが発生します。したがって、画像コンテナに `font-size：0px'を設定すると、ギャップが折りたたまれます。コンテナにテキストを含める必要がある場合は、フォントを正の量に戻すことを忘れないでください。jsをいじる必要はありません。

http://jsfiddle.net/U3gBG/8/

body {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

html, body {
    height: 100%;
}


.classroom {
    white-space: nowrap;
    height: 100%;
    font-size: 0px;
}

.classroom .student {
    height: 100%;
    display: inline;
}

.classroom .student .student-image {
    height: 100%;
}​
于 2012-12-01T02:40:44.717 に答える
0

それらをあなたが持っているようにチェーンを通過させるのではなく、3つのクラスに分割します。持っている代わりに

.classroom {
    white-space: nowrap;
    height: 100%;
}

.classroom .student {
    height: 100%;
    display: inline-block;
    float: left;
}

.classroom .student .student-image {
    height: 100%;
}​

それらを作るだけ

.classroom {
    white-space: nowrap;
    height: 100%;
}

.student {
    height: 100%;
    display: inline-block;
    float: left;
}

.student-image {
    height: 100%;
}​

これで、それぞれが定義されました。問題が発生している限り、CSSで希望する方法を十分に具体化していないため、幅または高さが設定されています。フロートは学生の要素に設定されているだけなので、奇妙なことをするのは簡単です。次のようなものを試してください。

.classroom {
    width:308px;
    height:100px;
    float:left;
    margin-left:0px;
}

.student {
    height:100px;
    width:100px;
    margin-left:2px;
    float: left;
}

.student-image {
    height: 100px;
    width:100px;
    float:left;
}​

私が与えた正確なスペックがあなたの写真に十分な大きさであるかどうかを確認しますが、それらを制御する方法を示すために...そして私が幅に対して与えたスペックに注意してください。教室の幅は308ピクセルで、生徒の幅は100ピクセルで、左マージンは2ピクセルです。したがって、3人の生徒のフレームは幅100ピクセルで、マージンはそれぞれ2ピクセルで、合計で306ピクセルの幅になり、残りの2ピクセルは最後の学生フレームの右側にあるので、すべてを合計します。必要な幅に計算し、マージンを考慮します。お役に立てれば... ：）

于 2012-12-01T06:21:38.743 に答える
-1

uはulliを使用できます

    <ul style="float:left; List-style:none;">
<li><img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/f.AmzRdUdc4pEtCuGvU03WXQ.jpg"></li>
<li> <img src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/k.jXX55KhHUWZGTAb-GpPkdg.jpg"></li>
 <li>   <img  src="http://dnqgz544uhbo8.cloudfront.net/_/fp/img/home/c.ZKQXc2Kc8-po-OK6AhDbtw.jpg"></li>
    </ul>

画像サイズを修正します

于 2012-12-01T03:17:52.593 に答える