Ich muss Videoelemente im Raster anzeigen, wobei einige Raster ohne Videoelement und einige Raster mit Videoelementen sind. Jedes Raster sollte die gleiche Breite und Höhe haben.
Aber mit dem folgenden Beispiel haben das zweite und dritte Gitter unterschiedliche Breite, alle haben die gleiche Breite. Wenn ich jedes Raster mit einem Videoelement platziere, hat jedes Raster die gleiche Größe, und wenn ich entferne, hat jedes Raster des Videoelements die gleiche Größe. Das Problem ist, wenn einige Raster ein Videoelement enthalten. Wie kann ich das beheben?
<!DOCTYPE html>
<html>
<head>
<style>
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
grid-gap: 8px;
background-color: #fff;
padding: 1px;
}
.grid-item {
background-color: #fafafa;
text-align: center;
padding: 0px 0;
font-size: 30px;
border: 0px solid #d2d2d7;
border-radius: 5px;
}
</style>
</head>
<body style='background: #fff;'>
<div id='mainBg' class='grid-container' style='grid-auto-flow: row;margin-top:40px;height:calc(100% - 90px)'>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
</div>
</body>
</html>Aktualisieren Sie die folgende Zeile in Ihrem .grid-container:
grid-template-columns: 1fr 1fr 1fr 1fr;
Dadurch werden 4 Spalten gleicher Breite festgelegt. Einige weiterführende Literatur zu Einheiten mit "Bruchteilen" oder "flexibler Länge". Ihr vollständiger Code könnte also so aussehen:
body,
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 8px;
background-color: #fff;
padding: 1px;
}
.grid-item {
background-color: #fafafa;
text-align: center;
padding: 0px 0;
font-size: 30px;
border: 0px solid #d2d2d7;
border-radius: 5px;
}<body style='background: #fff;'>
<div id='mainBg' class='grid-container' style='grid-auto-flow: row;margin-top:40px;height:calc(100% - 90px)'>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style="height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;"> </div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
<div class="grid-item">
<div style=" height: 100%; width: 100%;">
<video width="100%" height="100%" controls>
</video>
</div>
</div>
</div>
</body>Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.
Bei Verstößen wenden Sie sich bitte [email protected] Löschen.
Lass mich ein paar Worte sagen