定位重复元素 - CSS

Question

我正试图掌握我网站上几个元素的定位，而我所追求的只是关于你们如何去做的一些指示。

基本上，这是我想要创建的概念。我们专注于彩色旅行箱（“The Red Kite”，“QuayLink”，“Toon Link”等）。你会做些什么来创造这样的东西？

此部分应填充屏幕的宽度。但是我目前的代码没有：

说实话，我不知道如何处理这个问题。我尝试过每个盒子都有“旅程盒”，定义为：

.journey-box{

display: block;
float: left;
margin: 1%;
padding: 0.9em;
text-align: center;
min-width: 16em;

}

所有包装在容器中：

section{

margin: 0 auto;
text-align: center;
width: 100%;

}

但无济于事。任何帮助将不胜感激。

JSFiddle：http://jsfiddle.net/oinkk/d4Agv/

干杯

Answer 1

首先，当我打开网页时，它看起来完全不同，如图所示。但是，我建议不要将元素用作“包装器”。只需简单地使用div作为类的包装器。
当你将css提供给包装器时：

.wrapper
{
  height: 100%;
  width: 100%;
}

这样，包装器的宽度和高度（也包括其中的内容）将根据可用空间的宽度进行调整。

接下来，你应该注意到你也可以标记锚元素。现在你的元素没有高度或高度，它只是用于点击。锚点可以与div具有相同的标记。
另外，我会给箱子高度一个静态高度，这样你就可以获得更好的“阻挡”效果。

这只是整个网页的一个方面，但我会像这样工作。
希望你能用这个做点什么:)。

Answer 2

最好建立某种类型的网格系统，甚至是粗略的网格系统来布置这些项目。

我在这里嘲笑了一个简单的例子：Codepen Example