无法显示div中间html css

时间：2017-01-12 00:05:43

标签： html css3 flexbox

我有以下屏幕截图：

enter image description here

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

＆＃13;
＆＃13; 
 function showHide(a) {
   
   var div = document.getElementById("word");
   if (div.style.display == 'none') {
      div.style.display = '';
	  $('#word').text(a);
   }
   else {
     div.style.display = 'none';
   }
 }
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

有什么建议吗？

2 个答案:

答案 0 :(得分：0)

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

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

}

答案 1 :(得分：0)

一些通用问题

  • img标记是自我关闭，这意味着您不应该放置</img>
  • br也是自我关闭但/应该在结尾而不是开头，所以<br/>或<br>

对于实际问题，你需要一个相对位置容器（因为你想要它作为flex，你应该使用inline-flex，这样它就不会扩展到整个宽度，然后绝对定位箭头并使其居中。
（请记住，一旦块在另一个下折叠，它就无法工作）

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{
  height: 100vh;
  margin: 0;
}
.container {
  display: inline-flex;
  flex-flow: row wrap;
  position:relative;
}
.container:after {
  content: '';
  display: block;
  width: 100%;
  order: 1;
}
.container > a{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
.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;
}
div.1,
div.2,
div.3 {
  display: inline-block;
}
<div class="container">
  <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="http://dummyimage.com/220x160?text=Mother" id="mother" alt="mother" width="220" height="160">
        </a>
        <span id="img1"></span>
        <audio id="sound2" src="audio/father.mp3"></audio>
        <a onclick="document.getElementById('sound2').play(); showHide('Father');">
          <img src="http://dummyimage.com/220x160?text=Father" id="father" alt="father" width="220" height="160">
        </a>
        <span id="img2"></span>
        <br>
        <audio id="sound3" src="audio/sister.mp3"></audio>
        <a onclick="document.getElementById('sound3').play(); showHide('Sister');">
          <img src="http://dummyimage.com/220x160?text=Sister" id="sister" alt="sister" width="220" height="160">
        </a>
        <span id="img3"> </span>
        <audio id="sound4" src="audio/brother.mp3"></audio>
        <a onclick="document.getElementById('sound4').play();showHide('Brother');">
          <img src="http://dummyimage.com/220x160?text=Brother" id="brother" alt="brother" width="220" height="160">
        </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="http://dummyimage.com/220x160?text=Apple" id="apple" alt="apple" width="220" height="160">
      </a>
      <span id="img5"> </span>
      <audio id="sound6" src="audio/banana.mp3"></audio>
      <a onclick="document.getElementById('sound6').play();showHide('Banana');">
        <img src="http://dummyimage.com/220x160?text=Banana" id="banana" alt="banana" width="220" height="160">
      </a>
      <span id="img6"> </span>
      <br>
      <audio id="sound7" src="audio/orange.mp3"></audio>
      <a onclick="document.getElementById('sound7').play();showHide('Orange');">
        <img src="http://dummyimage.com/220x160?text=Orange" id="orange" alt="orange" width="220" height="160">
      </a>
      <span id="img7"> </span>
      <audio id="sound8" src="audio/grape.mp3"></audio>
      <a onclick="document.getElementById('sound8').play();showHide('Grape');">
        <img src="http://dummyimage.com/220x160?text=Grape" id="grape" alt="grape" width="220" height="160">
      </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="http://dummyimage.com/220x160?text=Cat" id="cat" alt="cat" width="220" height="160">
      </a>
      <span id="img13"> </span>
      <audio id="sound14" src="audio/dog.mp3"></audio>
      <a onclick="document.getElementById('sound14').play();showHide('Dog');">
        <img src="http://dummyimage.com/220x160?text=Dog" id="dog" alt="dog" width="220" height="160">
      </a>
      <span id="img14"> </span>
      <br>
      <audio id="sound15" src="audio/monkey.mp3"></audio>
      <a onclick="document.getElementById('sound15').play();showHide('Monkey');">
        <img src="http://dummyimage.com/220x160?text=Monkey" id="monkey" alt="monkey" width="220" height="160">
      </a>
      <span id="img15"> </span>
      <audio id="sound16" src="audio/fox.mp3"></audio>
      <a onclick="document.getElementById('sound16').play();showHide('Fox');">
        <img src="http://dummyimage.com/220x160?text=Fox" id="fox" alt="fox" width="220" height="160">
      </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="http://dummyimage.com/220x160?text=Window" id="window" alt="window" width="220" height="160">
      </a>
      <span id="img9"></span>
      <audio id="sound10" src="audio/table.mp3"></audio>
      <a onclick="document.getElementById('sound10').play(); showHide('Table');">
        <img src="http://dummyimage.com/220x160?text=Table" id="table" alt="table" width="220" height="160">
      </a>
      <span id="img10"></span>
      <br>
      <audio id="sound11" src="audio/roof.mp3"></audio>
      <a onclick="document.getElementById('sound11').play();showHide('Roof');">
        <img src="http://dummyimage.com/220x160?text=Roof" id="roof" alt="roof" width="220" height="160">
      </a>
      <span id="img11"> </span>
      <audio id="sound12" src="audio/floor.mp3"></audio>
      <a onclick="document.getElementById('sound12').play();showHide('Floor'); ">
        <img src="http://dummyimage.com/220x160?text=Floor" id="floor" alt="floor" width="220" height="160">
      </a>
      <span id="img12"> </span>
    </div>
  </div>
</div>
<a href="first_page.html">
    <img class="arrow" src="http://dummyimage.com/220x200/FFD700/FF1493?text=arrow" alt="Arrow">
  </a>
</div>

相关问题
最新问题