Question

我现在不知道该怎么做。

我正在创建滑块图片。但问题是我想让我的<img>标签向左浮动以制作幻灯片图片

#broadcast代表舞台。

#overflow表示溢出图片的掩码。

#inner代表图片容器。

article表示包含每个图像。

我将使用margin-left中设置的#inner来控制幻灯片。现在我只将文章标记设置为float，但它不会像我预期的那样。我应该怎么做先生如何使其在父宽度上对齐？

<div id="broadcast">
    <div id="overflow">
        <div id="inner">

            <article>
                <img src="001.png">
            </article>
            <article>
                <img src="002.ong">
            </article>
            <article>
                <img src="003.png">
            </article>

        </div>
    </div>
</div>

Answer 1

在这里你有一个小提琴如何让它们在彼此旁边对齐并且当它们溢出溢出div时仍然隐藏它们，现在你只需要使用javascript来动画它或者一些对我复杂的css;）

http://jsfiddle.net/8eaQj/

<强> CSS：

article{
    float:left;
}
#inner{
    height:150px;
    overflow:hidden;
    width:1050px;
}
#overflow{
    width:350px;
    overflow:hidden;
}

<强> HTML

<div id="broadcast">
    <div id="overflow">
        <div id="inner">

            <article>
                <img src="http://placehold.it/350x150&text=1">
            </article>
            <article>
                <img src="http://placehold.it/350x150&text=2">
            </article>
            <article>
                <img src="http://placehold.it/350x150&text=3">
            </article>

        </div>
    </div>
</div>

如何使浮点数超过其父宽度

1 个答案: