Beispiel:CSS3 overflow-x.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
<title>overflow-x</title>
<style>
figure {
display: inline-block;
margin: 0 3em 0 0;
text-align: center;
vertical-align: top;
}
p {
background: white;
border: 2px solid gold;
margin: 0 auto;
display: inline-block;
}
figure p {
display: block;
width: 75px;
}
#eins {overflow-x: auto;}
#zwei {overflow-x: scroll;}
#drei {overflow-x: visible;}
#vier {overflow-x: hidden;}
</style>
</head>
<body>
<h1>Übergroße Inhalte</h1>
<main>
<h2>Darstellung ohne overflow</h2>
<p>
<img src="/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
<h2>Darstellung mit ausreichender Höhe und allen Varianten für <code>overflow-x</code></h2>
<figure>
<figcaption>overflow-x: auto;</figcaption>
<p id="eins">
<img src="/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
<figure>
<figcaption>overflow-x: scroll;</figcaption>
<p id="zwei">
<img src="/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
<figure>
<figcaption>overflow-x: visible;</figcaption>
<p id="drei">
<img src="/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
<figure>
<figcaption>overflow-x: hidden;</figcaption>
<p id="vier">
<img src="/images/8/87/Selfhtml-logo.gif" alt="SELFHTML-Logo">
</p>
</figure>
</main>
</body>
</html>
