1

我正在努力掌握我网站上一些元素的定位，我所追求的只是一些关于你们如何去做的指示。

本质上，这是我想要创造的概念。我们专注于彩色旅程盒子（“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/

干杯

4

2 回答 2

0

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

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

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

接下来，您应该注意到您还可以标记锚元素。现在您的元素没有高度或高度，它只是用于单击。锚点可能与 div 具有相同的标记。
另外我会给盒子高度一个静态高度，所以你会得到更好的“块”效果。


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

于 2013-10-02T12:35:08.707 回答
0

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

我在这里模拟了一个简单的例子：Codepen Example

于 2013-10-02T13:41:17.997 回答