HTML CSS 为什么设置的 div 不开始新行

Question

Div 内 Div (id="icons") 未开始​​新行(如 Windows 7 图标)

我希望 div 内带有 id="icons" 的 div 不要开始垂直流动的新行。为什么不开始新的一行？

JsFiddle

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

body {
	margin:0;
	padding:0;
}
#icons {
	position: fixed;
	background: red;
	width: 100%;
	height: 100%;
	overflow: auto;
}
#icons1 {
	position: relative;
	background: blue;
	width: 20%;
	height: 25%;
}
#icons2 {
	position: relative;
	background: yellow;
	width: 20%;
	height: 25%;
}
#icons3 {
	position: relative;
	background: lime;
	width: 20%;
	height: 25%;
}
#icons4 {
	position: relative;
	background: pink;
	width: 20%;
	height: 25%;
}
#icons5 {
	position: relative;
	background: purple;
	width: 20%;
	height: 25%;
}
#icons6 {
	position: relative;
	background: blue;
	width: 20%;
	height: 25%;
}
#icons7 {
	position: relative;
	background: yellow;
	width: 20%;
	height: 25%;
}
#icons8 {
	position: relative;
	background: lime;
	width: 20%;
	height: 25%;
}
#icons9 {
	position: relative;
	background: pink;
	width: 20%;
	height: 25%;
}
#icons10 {
	position: relative;
	background: purple;
	width: 20%;
	height: 25%;
}

<div id="desktop">

<div id="icons">
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
<div id="icons1"></div>
<div id="icons2"></div>
<div id="icons3"></div>
<div id="icons4"></div>
<div id="icons5"></div>
<div id="icons6"></div>
<div id="icons7"></div>
<div id="icons8"></div>
<div id="icons9"></div>
<div id="icons10"></div>
</div>
    
</div>

Answer 1

默认情况下，DIV 是“ block ”的显示类型，因此强制换行。

您可以通过在 CSS 中使用 display: inline-block; 来解决这个问题，如下所示:

#icons1 {
    position: relative;
    background: blue;
    width: 20%;
    height: 25%;
    display: inline-block;
}

#icons2 {
    position: relative;
    background: blue;
    width: 20%;
    height: 25%;
    display: inline-block;
}
/* etc */

您可以将其添加到更高级别(图标)，但如果您尝试执行 Windows 风格，那么您可能需要更多地控制中断发生的内容和位置。

(希望我正确地解释了你的问题!)