我正在尝试创建如下图所示的布局， 然而，问题是布局需要是全屏 桌面设备，但我做不到。如果您以全屏/全页运行代码片段，您可以看到白色间隙 在它下面(不是全屏)。
那么如何在全屏/全屏中做这样的布局呢？ 是否可以？
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
body, html {
height: 100%;
}
.container{
overflow:hidden;
width:100%;
display: table;
}
.nav{
background:#1c1c1c;
width:250px;
height:100%;
display: table-cell;
}
img {
width: 100%;
}
#small_wrap{
background:white;
max-width:100%;
padding-right: 0.2%;
padding-left: 0.2%;
padding-bottom: 0.2%;
padding-top: 0.2%;
overflow:hidden;
}
#small_wrap > div{
/*background:#2C3E50;*/
float:left;
overflow:hidden;
display:block;
position:relative;
padding-bottom: 0.2%;
}
#small_wrap > div{
width: 24%;
/*padding-bottom : 23.3%;*/
margin: 0.5%;
margin-bottom:0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="nav">
</div><!--/nav-->
<div id="small_wrap">
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
<div><img src="https://i.imgur.com/vSD6fCX.png"></div>
</div>
</div><!--/container-->
</body>
</html>最佳答案
您可以使用新的 css 网格布局，这样您就可以完全控制单元格。 Check the compatibility
注意:如果您想换行列和底部有空格。更多关于新的 css 网格布局模块 here .
body {
margin: 0;
}
.Grid {
display: grid;
height: 100vh;
grid-template-rows: repeat(1fr);
grid-template-columns: repeat(5, minmax(100px, 1fr)); /* The first value is the columns number */
grid-column-gap: 8px;
grid-row-gap: 8px;
}
.Cell {
border: 1px solid gray;
padding: 8px;
}
.Cell::before {
content: '';
float: left;
padding-top: 100%;
}<div class="Grid">
<div class="Cell">Cell 01</div>
<div class="Cell">Cell 02</div>
<div class="Cell">Cell 03</div>
<div class="Cell">Cell 04</div>
<div class="Cell">Cell 05</div>
<div class="Cell">Cell 06</div>
<div class="Cell">Cell 07</div>
<div class="Cell">Cell 08</div>
<div class="Cell">Cell 09</div>
<div class="Cell">Cell 10</div>
<div class="Cell">Cell 11</div>
<div class="Cell">Cell 12</div>
<div class="Cell">Cell 13</div>
<div class="Cell">Cell 14</div>
<div class="Cell">Cell 15</div>
<div class="Cell">Cell 16</div>
<div class="Cell">Cell 17</div>
<div class="Cell">Cell 18</div>
<div class="Cell">Cell 19</div>
<div class="Cell">Cell 20</div>
<div class="Cell">Cell 21</div>
<div class="Cell">Cell 22</div>
<div class="Cell">Cell 23</div>
<div class="Cell">Cell 24</div>
<div class="Cell">Cell 25</div>
<div class="Cell">Cell 26</div>
<div class="Cell">Cell 27</div>
<div class="Cell">Cell 28</div>
<div class="Cell">Cell 29</div>
<div class="Cell">Cell 30</div>
<div class="Cell">Cell 31</div>
<div class="Cell">Cell 32</div>
<div class="Cell">Cell 33</div>
<div class="Cell">Cell 34</div>
<div class="Cell">Cell 35</div>
<div class="Cell">Cell 36</div>
<div class="Cell">Cell 37</div>
<div class="Cell">Cell 38</div>
<div class="Cell">Cell 39</div>
<div class="Cell">Cell 40</div>
<div class="Cell">Cell 41</div>
<div class="Cell">Cell 42</div>
<div class="Cell">Cell 43</div>
<div class="Cell">Cell 44</div>
<div class="Cell">Cell 45</div>
<div class="Cell">Cell 46</div>
<div class="Cell">Cell 47</div>
<div class="Cell">Cell 48</div>
<div class="Cell">Cell 49</div>
<div class="Cell">Cell 50</div>
</div>关于html - 如何制作全屏图像网格？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48327403/