html - 无法显示 div 中间 html css

Question

我有以下截图:

如何显示中间的箭头和文字？我在一个 div 中将 8 个图像分开，在另一个 div 中分开其他图像，但无论哪种方式我都无法显示它们之间的箭头。我的代码:

 function showHide(a) {
   
   var div = document.getElementById("word");
   if (div.style.display == 'none') {
      div.style.display = '';
	  $('#word').text(a);
   }
   else {
     div.style.display = 'none';
   }
 }

body {
	  display:flex;
	  flex-flow:row wrap;
	  margin:0;
	  height:100vh;
  }
body:after {
	  content:'';
	  display:block;
	  width:100%;
	  order:1;
  }
.responsive {
	  border:solid;
	  margin:0;
  }
.responsive:nth-child(1) {
	  margin-bottom:auto;
	  margin-right:auto;
	  order:0;
  }
.responsive:nth-child(2) {
	  margin-bottom:auto;
	  margin-left:auto;
	  order:0;
  }

.responsive:nth-child(3) {
	  margin-top:auto;
	  margin-right:auto;
	  order:2;
  }
.responsive:nth-child(4) {
	 margin-top:auto;
	 margin-left:auto;
	 order:2;
}
span{
	 margin-top: 270px;
	 margin-left: 610px;
	 position: absolute;
	 text-shadow: 0 0 3px #FFF000, 0 0 5px #0000FF;
	 font-size: 40px;
}
p{
	 margin-top: 100px;
	 margin-left: 570px;
	 position: absolute;
	 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
	 font-size: 70px;
}
.arrow {	
     position: absolute;
	 margin-top: 300px;
	 
}
div.1, div.2, div.3 {
     display: inline-block;
}

<div class="1" >
<div class="responsive">
  <div class="img">
    <a target="_blank" href="animals/dog.jpg">
		<audio id="sound1" src="audio/mother.mp3" ></audio><a onclick="document.getElementById('sound1').play(); showHide('Mother'); "><img src="family/mother.jpg" id="mother" alt="mother" width="220" height="160"></img></a> 
		<span id="img1"></span>
		<audio id="sound2" src="audio/father.mp3" ></audio><a onclick="document.getElementById('sound2').play(); showHide('Father');"><img src="family/father.jpg" id="father" alt="father" width="220" height="160"></img></a>
		<span id="img2"></span>
		</br>
		<audio id="sound3" src="audio/sister.mp3" ></audio><a onclick="document.getElementById('sound3').play(); showHide('Sister');"><img src="family/sister.jpg" id="sister" alt="sister" width="220" height="160"></img></a>
		<span id="img3"> </span>
		<audio id="sound4" src="audio/brother.mp3" ></audio><a onclick="document.getElementById('sound4').play();showHide('Brother');"><img src="family/brother.jpg" id="brother" alt="brother" width="220" height="160"></img></a>
		<span id="img4"> </span>
    </a>
  </div>
</div>
 
   
   

<div class="responsive">
  <div class="img">
    <audio id="sound5" src="audio/apple.mp3" ></audio><a onclick="document.getElementById('sound5').play(); showHide('Apple');"><img src="fruits/apple.jpg" id="apple" alt="apple" width="220" height="160"></img></a>
	<span id="img5"> </span>
	<audio id="sound6" src="audio/banana.mp3" ></audio><a onclick="document.getElementById('sound6').play();showHide('Banana');"><img src="fruits/banana.jpg" id="banana" alt="banana" width="220" height="160"></img></a>
	<span id="img6"> </span>
	</br>
	<audio id="sound7" src="audio/orange.mp3" ></audio><a onclick="document.getElementById('sound7').play();showHide('Orange');"><img src="fruits/orange.jpg" id="orange" alt="orange" width="220" height="160"></img></a>
	<span id="img7"> </span>
	<audio id="sound8" src="audio/grape.mp3" ></audio><a onclick="document.getElementById('sound8').play();showHide('Grape');"><img src="fruits/grape.jpg" id="grape" alt="grape" width="220" height="160"></img></a>
	<span id="img8"> </span>
  </div>
</div>
</div>

<div class="2">
<span id="word" style="display:none"></span>
</div>

<div class="3">
<div class="responsive">
  <div class="img">
      <audio id="sound13" src="audio/cat.mp3" ></audio><a onclick="document.getElementById('sound13').play(); showHide('Cat');"><img src="animals/cat.jpg" id="cat" alt="cat" width="220" height="160"></img></a>
	  <span id="img13"> </span>
	  <audio id="sound14" src="audio/dog.mp3" ></audio><a onclick="document.getElementById('sound14').play();showHide('Dog');"><img src="animals/dog.jpg" id="dog" alt="dog" width="220" height="160"></img></a>
	  <span id="img14"> </span>
	  </br>
	  <audio id="sound15" src="audio/monkey.mp3" ></audio><a onclick="document.getElementById('sound15').play();showHide('Monkey');"><img src="animals/monkey.jpg" id="monkey" alt="monkey" width="220" height="160"></img></a>
	  <span id="img15"> </span>
	  <audio id="sound16" src="audio/fox.mp3" ></audio><a onclick="document.getElementById('sound16').play();showHide('Fox');"><img src="animals/fox.jpg" id="fox" alt="fox" width="220" height="160"></img></a>
	  <span id="img16"> </span>
  </div>
</div>

<div class="responsive">
  <div class="img">
      <audio id="sound9" src="audio/window.mp3" ></audio><a onclick="document.getElementById('sound9').play();showHide('Window');"><img src="house/window.jpeg" id="window" alt="window" width="220" height="160"></img></a>
	  <span id="img9"></span>
	  <audio id="sound10" src="audio/table.mp3" ></audio><a onclick="document.getElementById('sound10').play(); showHide('Table');"><img src="house/table.jpg" id="table" alt="table" width="220" height="160"></img></a>
	  <span id="img10"></span>
	  </br>
	  <audio id="sound11" src="audio/roof.mp3" ></audio><a onclick="document.getElementById('sound11').play();showHide('Roof');"><img src="house/roof.jpg" id="roof" alt="roof" width="220" height="160"></img></a>
	  <span id="img11"> </span>
	  <audio id="sound12" src="audio/floor.mp3" ></audio><a onclick="document.getElementById('sound12').play();showHide('Floor'); "><img src="house/floor.jpg" id="floor" alt="floor" width="220" height="160"></img></a>
	  <span id="img12"> </span>
  </div>
</div>
</div>

<a href="first_page.html"><img class="arrow" src="arrow.gif" alt="Arrow"></a>

有什么建议吗？

Answer 1

您需要将箭头绝对定位在包含所有图像的相对定位的 div 内，并使用顶部、左侧和变换将其居中 - 尽管您也可以使用负边距而不是变换。不要忘记供应商前缀。

.arrow {    
    position: absolute;
    margin-top: 300px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    transform: translateX(-50%);

}