图像网格布局与水平滚动 [英] Images gird layout with horizontal scroll

问题描述

是我想要建立的。正方形应该是方形图像。数字按照顺序显示，应该添加到布局中。我发布了类似问题，但我需要添加新的小方形图像在右端。还有整个事情应该是水平可滚动的。

This is what I'm trying to build. The squares should be square images.The numbers show in whitch order they should be added to the layout. I posted a similar question but I need to add new small square images at the right end. Also the whole thing should be horizontal scrolable.

以下是 FIDDLE 代码：

Here is a FIDDLE with the code I have :

HTML：

<div id="big_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>
<div id="small_wrap">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

CSS：

div {
    float:left;
}
div > div{
    background:#2C3E50;
}
#big_wrap,#small_wrap{
    width:50%;
}
#big_wrap > div{
    width:48%;
    padding-bottom:48%;
    margin:1%;
}
#small_wrap > div{
    width: 31%;
    padding-bottom : 31.3%;
    margin:1%;
}

推荐答案

，您需要使容器比视口更宽。你可以添加 body {width：120％;} 。

To make your layout horizontaly scrollable, you need to make the container wider than the viewport. You can add body{width:120%;} for that.

列修改为您的布局，并使用现有的，所以所有列的宽度总和等于100％。

Then you just need to append an other column to your layout and fix the with of the existing ones so the sum of the width of all columns equals 100%.

如果你需要在正方形，我建议您查看此答案。

If you need to add some content inside the squares, I recommend you have a look at this answer.

这里是 FIDDLE

Here is a FIDDLE

和代码。

将此添加到您的HTML：

Add this to your HTML :

<div id="right_col">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS：

body{
    width:120%;
}
div {
    float:left;
}
div > div{
    background:#2C3E50;
}
#big_wrap,#small_wrap{
    width:43%;
}
#right_col{
    width:14%;
}
#big_wrap > div{
    width:48%;
    padding-bottom:48%;
    margin:1%;
}
#small_wrap > div{
    width: 31%;
    padding-bottom : 31.3%;
    margin:1%;
}
#right_col > div{
    width:95%;
    margin:2.5% 5% 5% 0;
    padding-bottom:95.1%;
}

元素的width / padding底部可能需要一些调整大小相同。

The width/padding bottom of the elements might need some tweaking to they all have the same size.

这篇关于图像网格布局与水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！