html - CSS-行のdivに画像を表示する

Question

div内に3つの画像があり、それらを1行で表示したいと思います。私の現在のコードからの出力は、2つの画像が1行で、もう1つが下部にあるというものです。

どんな助けでもいただければ幸いです！

私のHTMLコード：

<div id="slider_container">
            <div class="slider">
                <img id="1" src="Kid Playing Guitar_big.jpg" border="0" style="float:left;" />
                <img id="2" src="University Students_big.jpg" border="0" style="float:left;" />
                <img id="3" src="Business Man_big.jpg" border="0" style="float:left;" />
            </div>
            <div class="slider_thumbnails">
                <img id="1" src="Kid Playing Guitar.jpg" border="0" />
                <img id="2" src="University Students.jpg" border="0" />
                <img id="3" src="Business Man.jpg"  border="0" />
            </div>
        </div>

CSSの私のコード：

@CHARSET "UTF-8";

        #slider_container{
            height: 360px;
            width: 720px;
        }

        .slider{
            width: 720px;
            height: 360px;
            overflow: hidden;
            background-image: url(loading.gif);
            background-repeat: no-repeat;
            background-position: center;
        }

        .slider img{
            width: 480px;
            height: 360px;
            display: none;
        }

        .slider_thumbnails{
            width: 720px;
            display:inline-block;
        }

        .slider_thumbnails img{
            display: inline-block;
        }

回答を投稿した後、コードを説明してください。

Answer 1

.slider_thumbnails{
    width: 720px;
    display:inline-block;
    white-space:nowrap;
}

Answer 2

問題は、画像の全幅がコンテナの幅と等しいことだと思います。画像の幅を235に変更してみてください。これはjsfiddleで機能します。

Answer 3

はどうfloat:left;ですか？

.slider img{
            float: left;
            position: relative;
           }

フロートの場合、width非常に重要です。marginしたがって、'emを測定し、、の後に計算される適切な幅を定義することを忘れないでくださいpadding。

Answer 4

.slider img{
            width: 480px;
            height: 360px;
            display: none;
        }

.slider_thumbnails{
            width: 720px;
            display:inline-block;
        }

.slider_thumbnails img{
            display: inline-block;
        }