bider-ins-iframe-laden-ohne-javascript.php
Quell Code
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Test IFrame</title>
<style>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
.aussen {
display: flex;
width: 100%;
height: 100vh;
}
.links, .rechts {
display: flex;
width: 15%;
flex-direction: row;
flex-wrap: wrap;
align-content: space-around;
justify-content: center;
overflow: auto;
}
.mitte {
display: flex;
align-content: center;
justify-content: center;
flex-wrap: wrap;
width: 70%;
height: 100vh;
}
iframe.zeige-bilder {
width: 90%;
height: 90vh;
border: 0;
}
.links img, .rechts img {
width: 100%;
}
</style>
</head>
<body>
<div class="aussen">
<div class="links">
<a href="/bilder/20.jpg" target="show"><img src="/bilder/20.jpg" alt="1"></a>
<a href="/bilder/21.jpg" target="show"><img src="/bilder/21.jpg" alt="2"></a>
</div>
<div class="mitte">
<iframe name="show" srcdoc='<html>
<head>
<style>
body {
background:ivory;
}
</style>
</head>
<body>
<p>…</p>
</body></html>' class="zeige-bilder" scrolling="no"></iframe>
</div>
<div class="rechts">
<a href="/bilder/22.jpg" target="show"><img src="/bilder/22.jpg" alt="3"></a>
<a href="/bilder/23.jpg" target="show"><img src="/bilder/23.jpg" alt="4"></a>
<a href="/bilder/3.jpg" target="show"><img src="/bilder/3.jpg" alt="5"></a>
</div>
</div>
</body>
</html>