2

这是设置：

我有一个 100% 宽度的 div，它允许输入多个图像（这是在 wordpress 中）。我设置了一个类，可以将这些图像浮动。溢出是隐藏的，但我希望整个宽度填满并只显示最后一张图像的一部分。

现在的代码运行良好，但仅在完全适合并留出空白空间时才显示最后一张图像，直到浏览器窗口大到可以拍摄另一张图像。我基本上是在设置一个横幅，它是高度相等但宽度可变的图像的拼贴画。他会放入足够多的图像，使其成为一个连续的横幅。

这是css（类在id中重复）：

#banner {clear:both;height:250px;width:100%;overflow:hidden;}
.banner-image {float:left;}

谢谢你的帮助！

4

1 回答 1

2

你可以这样做：

html

<div class="maincontainer">
    <div class="imagecontainer">
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <img class="banner-image" src="somsrc"/>
        <!-- add more images here -->
    </div>    
</div>

CSS

.maincontainer {
    height:250px;width:100%;overflow:hidden;
}
.imagecontainer {
    width:1000%; /* NOTE very wide div that is overflowing */
    clear:both;
}
.banner-image {
    float:left;
    background:#f00;
    margin-right:3px;
    width:150px;
    height:100px;
}

看看这个小提琴。根据您的屏幕宽度，您可能需要调整浏览器的大小才能看到图像剪辑。

于 2013-06-08T02:32:19.520 回答