Question

这是设置：

我有一个100％宽度的div，允许输入多个图像（这是在wordpress中）。我有一个类设置浮动那些图像。溢出被隐藏，但我想要填满整个宽度并仅显示最后一个图像的一部分。

现在的代码效果很好，但只显示最后一个图像，如果它完全适合并留下空白空间，直到浏览器窗口大到足以拍摄另一个图像。我基本上是设置一个横幅，这是一个高度相等但宽度可变的图像拼贴画。他会投入足够的图像，这是一个连续的横幅。

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

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

感谢您的帮助！

Answer 1

你可以这样做：

<强> 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;
}

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

多个浮动divs溢出隐藏，局部视图

1 个答案: