Question

我对此非常陌生，我在按照我想要的方式定位一些图像时遇到了一些问题。这就是我想要的：

enter image description here

a:link: 
a:visited: 
a:hover

.thumbnail {
    border: 0 none;
    box-shadow: none;
}

/*
Element width position calculated with:
(((1-((229/2)*x+(20*y))/1080)/2)+((229/2+20)/1080)*z)*100

x = number of triangles in row
y = number of spaces between triangles
z = triangle number from starting postion left -1

Vertical:
(((1-(844/1080))/2)+((196+20)/1080)*z)*100
*/

body {
    background: url(Resources/forside_baggrund.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.Diamond {
    width: 1080px;
    height: 1080px;
    margin: 0 auto;
    position: relative;
    background-color:transparent;
}

.Diamond img {
    width: 229px;
    height: 196px;
    position:absolute;
}

.room {
    width: 114.5px;
    height: 131px;
    position:absolute;
    background-color:transparent;
    left: 50%;
    top: 36%;
}

.info {
    width: 114.5px;
    height: 131px;
    position:absolute;
    background-color:transparent;
    left: 37.3%;
    top: 56%;
}

.language {
    width: 114.5px;
    height: 131px;
    position:absolute;
    background-color:transparent;
    left: 50%;
    top: 51%;
}

.kursus {
    width: 114.5px;
    height: 131px;
    position:absolute;
    background-color:transparent;
    left: 62.2%;
    top: 56%;
}

/* Top Row */
.Diamond>:first-child {
    left: 32.2453703704%;
    top: 10.9259259259%;
}

.Diamond>:nth-child(2) {
    left: 44.6990740741%;
    top: 10.9259259259%;
}

.Diamond>:nth-child(3) {
    left: 57.1527777778%;
    top: 10.9259259259%;
}

/* Second Row */
.Diamond>:nth-child(4) {
    left: 19.7916666667%;
    top: 30.9259259259%;
}

.Diamond>:nth-child(5) {
    left: 32.2453703704%;
    top: 30.9259259259%;
} 

.Diamond>:nth-child(6) {
    left: 44.6990740741%;
    top: 30.9259259259%;
}

.Diamond>:nth-child(7) {
    left: 57.1527777778%;
    top: 30.9259259259%;
}

.Diamond>:nth-child(8) {
    left: 69.6064814815%;
    top: 30.9259259259%;
}

/* Third Row */
.Diamond>:nth-child(9) {
    left: 7.33796296296%;
    top: 50.9259259259%;
}

.Diamond>:nth-child(10) { 
    left: 19.7916666667%;
    top: 50.9259259259%;
} 

.Diamond>:nth-child(11) {
    left: 32.2453703704%;
    top: 50.9259259259%;
}

.Diamond>:nth-child(12) {
    left: 44.6990740741%;
    top: 50.9259259259%;
}

.Diamond>:nth-child(13) {
    left: 57.1527777778%;
    top: 50.9259259259%;
}

.Diamond>:nth-child(14) {
    left: 69.6064814815%;
    top: 50.9259259259%;
}
.Diamond>:nth-child(15) {
    left: 82.0601851852%;
    top: 50.9259259259%;
}

/* Fourth Row */
.Diamond>:nth-child(16) {
    left: 7.33796296296%;
    top: 70.9259259259%;
}

.Diamond>:nth-child(17) { 
    left: 19.7916666667%;
    top: 70.9259259259%;
} 

.Diamond>:nth-child(18) {
    left: 32.2453703704%;
    top: 70.9259259259%;
}

.Diamond>:nth-child(19) {
    left: 44.6990740741%;
    top: 70.9259259259%;
}

.Diamond>:nth-child(20) {
    left: 57.1527777778%;
    top: 70.9259259259%;
}

.Diamond>:nth-child(21) {
    left: 69.6064814815%;
    top: 70.9259259259%;
}

.Diamond>:nth-child(22) {
    left: 82.0601851852%;
    top: 70.9259259259%;
}

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <title>www.klejstruplund.dk/Forside</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <div class="Diamond">
	<img src="Resources/Triangles/Koekken.png">
	<img src="Resources/Triangles/Kongelys.png">
	<img src="Resources/Triangles/Hoene.png">  
   	<img src="Resources/Triangles/Gaardvindue.png">
	<img src="Resources/Triangles/Sorttomat.png">
	<img src="Resources/Buttons/Vearelser.png">
	<img src="Resources/Triangles/View.png">
	<img src="Resources/Triangles/Besser_Rev.png">
	<img src="Resources/Triangles/Fidus.png">
	<img src="Resources/Triangles/Demon.png">
	<img src="Resources/Buttons/Kursus.png">
	<img src="Resources/Buttons/Union_Jack.png">
	<img src="Resources/Buttons/Om_stedet.png">
	<img src="Resources/Triangles/Drivhus.png">
	<img src="Resources/Triangles/Indenfor.png">
	<img src="Resources/Triangles/Mereindenfor.png">
	<img src="Resources/Triangles/Huset.png">
	<img src="Resources/Triangles/fidusiovn.png">
	<img src="Resources/Triangles/Apples.png">
	<img src="Resources/Triangles/Cabbage.png">
	<img src="Resources/Triangles/Pond.png">
	<img src="Resources/Triangles/Filtsommerfugl.png">
	<a href="#"><div class="room" alt="Leje af Vaerelse"></div></a>
	<a href="#"><div class="info" alt="Information om stedet"></div></a>
	<a href="#"><div class="language" alt="Change Language to English"></div></a>
	<a href="#"><div class="kursus" alt="Information om kurser"></div></a>
  </div>	 	 	 
</body> 
</html>

我试图遵循不同的解决方案，但到目前为止都失败了，最新导致所有图像垂直放置。我知道我可以通过将图案创建为图像来使其更容易，但由于这是我的学习过程，我想使用CSS工具来完成它。

经过一番搜索和实验后，我决定在相对定位的div中找到绝对定位的图像：

等。在所有22个等边三角形中。

这导致了前面提到的三角形塔，在我列出耐心之前，我决定寻求帮助。我错过了什么？

更新我添加了html和css的完整代码，虽然问题现在已经解决了，但似乎有点多余，我只能说我现在得到了我想要的结果。

我被告知的问题是，我让选择器落后了;思考.Diamond：nth-child（2）意味着将选择容器div类Diamond的第二个孩子。我现在添加一个“＆gt;”介于.Diamond和：nth-child（x）/：第一个孩子。愚蠢的错误。

Answer 1

我将假设.Diamond是您的容器。

因此，您希望.Diamond>:first-child获得.Diamond的第一个孩子 - 否则，您将获得第一个孩子的.Diamond 其容器。

基本上，你的风格都没有被应用。

快速提示：

.Diamond>div {
    width:229px;
    height:196px;
}

没有任何意义可以复制三角形的所有。

钻石形状的三角形图像

1 个答案: