1
Ich mache eine App, in der ich ein Slide In/Out Menü habe. Wenn dieses Menü angezeigt wird, möchte ich, dass die Bilder in zwei Reihen angezeigt werden. Da es viele Bilder gibt, möchte ich einen horizontalen Bildlauf haben, um durch sie sowie Pfeile zu navigieren.Elemente in Form einer Tabelle horizontal ausrichten
Mein Problem ist, dass ich nicht in der Lage bin, diese Bilder in zwei Reihen horizontal anzuordnen. Sie erscheinen immer vertikal.
Derzeit verschwindet der Pfeil auf der rechten Seite, wenn ich weitere Bilder hinzufüge, und wenn ich bis zum Ende scrolle, wird es wieder angezeigt. Ich weiß nicht, warum ich es nicht schaffen kann, einen bestimmten Scroll-Bereich zu haben, ohne die anderen Elemente zu bewegen.
var step = {};
var stepsOpen = false;
function onHandleClick() {
if (stepsOpen) {
document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: -77px;");
document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 102px;");
} else {
document.getElementsByClassName("StepMenu")[0].setAttribute("style", "top: 102px;");
document.getElementsByClassName("Handle")[0].setAttribute("style", "top: 281px;");
}
stepsOpen = !stepsOpen;
}body{
margin:0;
height:100%;
background: #000000;
}
html {
font-family: 'SST Japanese Pro';
font-size: 62.5%;
height: 100%;
width:100%;
margin: 0;
padding: 0;
-webkit-user-select: none;
user-select: none;
}
.Title{
background: linear-gradient(#000000, #2a2a2a);
font-size: 28px;
color: #b9b9b9;
top:0;
left: 0;
position:fixed;
margin: 0;
width: 100%;
height: 102px;
line-height: 102px;
z-index:2;
display: flex;
flex-direction: column;
align-items: center;
}
.StepMenu{
background: #2a2a2a;
margin: 0;
padding: 0;
position:relative;
display:flex;
height: 179px;
width:100%;
top:-77px;
transition: 0.5s;
}
.stepContainer{
float:left;
top:0;
width:100%;
height: 100%;
display:flex;
flex-direction: row;
align-items:baseline;
}
.Stitle {
font-size: 17px;
color: #a7a7a7;
width: 200px;
left: 0;
height: 50%;
margin: 0;
align-items: center;
display: flex;
padding-left:20px;
}
.Steps {
width:90%;
height: 179px;
overflow: auto;
}
.lines {
height: 89.5px;
width: 100%;
display: table;
table-layout: fixed;
}
img {
width: 97px;
height:55px;
background-image: url('../res/image/tuna.jpg');
margin-left: 12.5px;
margin-right: 12.5px;
margin-bottom: 31px;
display: table-cell;
}
::-webkit-scrollbar {
width: 0px;
}
.arrow {
border: solid white;
position: relative;
padding: 10px;
margin: auto;
}
.right {
padding: 0;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-left: 20px solid #959595;
border-right: 0px;
}
.left {
padding: 0;
width: 0;
height: 0;
border-top: 80px solid transparent;
border-bottom: 80px solid transparent;
border-right: 20px solid #959595;
border-left: 0px;
}
.Handle {
width: 87px;
top: 102px;
margin: auto;
margin-top: 0px;
background-color: #2a2a2a;
position: absolute;
left: 0;
right: 0;
height: 13px;
padding: 4px;
transition: 0.5s;
display:flex;
}
.Htext {
font-size: 11px;
color: #959595;
width: 80%;
margin-left: 10px;
}
.Harrow {
position: relative;
width: 0;
height: 0;
margin-right:10px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #959595;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Step</title>
<link rel="stylesheet" href="./css/style.css"/>
</head>
<body>
<div class="Title">Recipe Title</div>
<div class="StepMenu">
<div>
<div class="Stitle">Part1</div>
<div class="Stitle">Part2</div>
</div>
<div class="stepContainer">
<div class="arrow left"></div>
<div class="Steps">
<div class="lines">
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
</div>
<div class="lines">
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
<img></img>
</div>
</div>
<div class="arrow right"></div>
</div>
</div>
<div class="Handle" onclick="onHandleClick()">
<div class="Htext">STEPS</div>
<div class="Harrow"></div>
</div>
<script src="./js/app.js"></script>
</body>
</html>