0
У меня есть следующий скриншот:не может отображать Див средний HTML CSS
Как отобразить стрелку и слово в середине? Я отделяю 8 изображений в DIV и другие в другом DIV, но так или иначе я не могу отобразить стрелку между them.My кодом:
function showHide(a) {
var div = document.getElementById("word");
if (div.style.display == 'none') {
div.style.display = '';
\t $('#word').text(a);
}
else {
div.style.display = 'none';
}
}body {
\t display:flex;
\t flex-flow:row wrap;
\t margin:0;
\t height:100vh;
}
body:after {
\t content:'';
\t display:block;
\t width:100%;
\t order:1;
}
.responsive {
\t border:solid;
\t margin:0;
}
.responsive:nth-child(1) {
\t margin-bottom:auto;
\t margin-right:auto;
\t order:0;
}
.responsive:nth-child(2) {
\t margin-bottom:auto;
\t margin-left:auto;
\t order:0;
}
.responsive:nth-child(3) {
\t margin-top:auto;
\t margin-right:auto;
\t order:2;
}
.responsive:nth-child(4) {
\t margin-top:auto;
\t margin-left:auto;
\t order:2;
}
span{
\t margin-top: 270px;
\t margin-left: 610px;
\t position: absolute;
\t text-shadow: 0 0 3px #FFF000, 0 0 5px #0000FF;
\t font-size: 40px;
}
p{
\t margin-top: 100px;
\t margin-left: 570px;
\t position: absolute;
\t text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
\t font-size: 70px;
}
.arrow { \t
position: absolute;
\t margin-top: 300px;
\t
}
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">
\t \t <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>
\t \t <span id="img1"></span>
\t \t <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>
\t \t <span id="img2"></span>
\t \t </br>
\t \t <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>
\t \t <span id="img3"> </span>
\t \t <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>
\t \t <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>
\t <span id="img5"> </span>
\t <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>
\t <span id="img6"> </span>
\t </br>
\t <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>
\t <span id="img7"> </span>
\t <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>
\t <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>
\t <span id="img13"> </span>
\t <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>
\t <span id="img14"> </span>
\t </br>
\t <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>
\t <span id="img15"> </span>
\t <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>
\t <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>
\t <span id="img9"></span>
\t <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>
\t <span id="img10"></span>
\t </br>
\t <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>
\t <span id="img11"> </span>
\t <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>
\t <span id="img12"> </span>
</div>
</div>
</div>
<a href="first_page.html"><img class="arrow" src="arrow.gif" alt="Arrow"></a>Любое предложение?
где скриншот? – Jere
@jere скриншот находится в URL-адресе «введите описание изображения здесь» –
В середине всех изображений, или что? –