html - CSS - 在一行中的 div 中显示图像

Question

我在一个 div 中有 3 个图像，我希望它们显示在一行中。来自我当前代码的输出是 2 个图像是一个单行，另一个在底部。

任何帮助，将不胜感激！

我的 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

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

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

.slider_thumbnails img{
            display: inline-block;
        }

Answer 3

我认为问题在于图像的总宽度等于容器的宽度。尝试将图像的宽度更改为 235。它适用于您的 jsfiddle。

Answer 4

一个float:left;呢？

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

对于浮动，width非常重要。所以不要忘记测量它们并定义在margin,之后计算的适当宽度padding。