Align elements in form of a table horizontally

Question

I am making an App in which I have a slide in/out menu. When this menu is displayed I want it to show the images in two rows. Since there are many images, I want to have a horizontal scroll to navigate through them as well as arrows.

My problem is that I am not able arrange these images in two rows in a horizontal way. They keep appearing in a vertical way.

Currently, the arrow on the right goes away when I add more images, and when I scroll to the end it shows again. I do not know why I cannot manage to have a determined scroll area without moving the other elements.

 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>

Answer 1

I just added the float:left for the image in CSS. This may helpful fo you. Here is my fiddle link..

https://jsfiddle.net/b6jpkdhk/

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;
    float:left;
}

Align elements in form of a table horizontally

Question

1 answers

solution1
0 2017-05-23 10:11:26

Align elements in form of a table horizontally

Question

1 answers

solution1 0 2017-05-23 10:11:26

solution1
0 2017-05-23 10:11:26