1
私はスライドイン/アウトメニューを持っているアプリケーションを作っています。このメニューが表示されたら、イメージを2行で表示します。多くの画像があるので、矢印だけでなく、それらの間をナビゲートするための横スクロールが必要です。要素を水平にテーブルの形に整列させます
私の問題は、これらの画像を水平に2列に並べることができないことです。彼らは垂直な方法で表示され続ける。
現在、画像を追加すると右の矢印が消え、最後までスクロールすると再び表示されます。なぜ私は他の要素を動かさずに決定されたスクロール領域を持つことができないのか分かりません。
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>