如何制作全屏图像网格？

时间：2018-01-18 17:47:08

标签： html css

我正在尝试创建如下图所示的布局， 但问题是布局需要是 全屏 桌面设备，但我无法做到。如果您在 全屏/整页 中运行 代码段 ，您可以看到白色差距在它下面（不是全屏）。

那么如何在全窗口/屏幕上进行这样的布局？ 可能吗？

enter image description here 

/* 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>

2 个答案:

答案 0 :(得分：2)

您可以使用新的css网格布局，这样您就可以完全控制单元格。 Check the compatibility

注意：如果要包装列并在底部有空格，可以使用grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));。有关新的css网格布局模块here的更多信息。

＆＃13;
＆＃13; 
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%;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

尝试改变这一点：

#small_wrap{
    background:white;
    max-width:100%;
    padding-right: 0%;
    padding-left: 0%;
    padding-bottom: 0%;
    padding-top: 0%;
    overflow:hidden;
}

和此：

a
相关问题
最新问题