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

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

Answer 3

float:left;怎么样？

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

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

Answer 4

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

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

.slider_thumbnails img{
            display: inline-block;
        }

CSS - 在一行中以div显示图像

4 个答案: