Vertical gaps between inline-block elements for big amounts of elements
Question
I am currently doing the JS/jQuery Project for The Odin Project and i think my solution is performing really well.
The problem i have with it tho, is that for bigger amounts of elements (in JSFiddle it starts to break around 40-45 elements per line, in my Chrome Browser around 50-52), there will be a vertical gap between the elements of two adjacent rows. I initially set vertical-align: top to remove the gaps, which works up to the mentioned 40-50 elements per row.
If you raise the amount of elements per row in the JS file (set it to 50 or higher), you will see what i mean.
This is not the behavior i am looking for. I want a connected grid with no gaps between the cells on either side. Any idea what breaks the vertical-align: top ?
Edit : I think it has to do with the percentage-width/height, as it also breaks on numbers below 40, if the result of the division is a "difficult fraction".
1 answers
solution1
1 ACCPTED 2016-10-17 11:34:09
Inline boxes inherit inheritable properties from their block parent box. therefore your grids are taking line-height of .container . When .container is overflowed vertical-align: top; stops working, so it's better to use line-height:0; to parent element ( .container ).
Source: https://www.w3.org/TR/CSS2/visuren.html#inline-boxes
$(document).ready(function() { createGrid(48); $(".cell").mouseenter(function() { $(this).css("background-color", "green"); }); $(".cell").mouseleave(function() { $(this).css("background-color", "white"); }); }); function createGrid(n) { var container = $(".container"); container.empty(); var sizeP = 100 / n; var cell = $('<div/>', { class: 'cell', style: 'width: ' + sizeP + '%; height: ' + sizeP + '%;' }); for(i = 0; i < n*n; i++) { container.append(cell.clone()); } }
.container { border: 5px solid black; border-radius: 5px; padding: 10px; margin: 10px; width: 800px; height: 800px; line-height:0; } .cell { display: inline-block; box-sizing: border-box; border: 1px solid black; vertical-align: top; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <body> <div class="container"></div> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.