每次触发JavaScript时HTML/CSS结构都会崩溃

我对编码非常陌生，我已经花了很多时间试图弄明白这一点：

我有很多盒子（DIV）在一个圆圈中，中间有一个按钮。单击按钮时，其中一个框变为黄色

问题是，当单击按钮时，布局会塌陷，框堆叠在一列中。为什么呢

也许我应该选择桌子的结构，但我认为你们不能做类似的设计。请告诉我你的想法

这是我的密码：

/----计时器---->
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
element.innerHTML=“请等待”+secondsToHms（秒）+“秒”；
秒--；
var timer=setTimeout（'倒计时（'+secs+'，“'+elem+”），1000）；
如果（秒<1）{
清除超时（计时器）；
随机短语（）；
}
//----小时到分钟到秒---->
第二个职能部门（d）{
d=数量（d）；
var h=数学楼层（d/3600）；
var m=数学下限（d%3600/60）；
var s=数学下限（d%3600%60）；
返回（（h>0？h+）：“+（m<10？.0:”）：“）+m+”：“+（s<10？.0:”）+s）；
}
}
//-----随机选取------->
函数（短语）{
变量ID=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]；
var divs=document.getElementsByClassName（“div”）；
而（divs.length>0）{
var i=Math.floor（Math.random（）*ids.length）；
divs[0].id='item-'+id[i]；
id.拼接（i，1）；
divs=[].slice.call（divs，1）；
}
}

html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.集装箱{
宽度：860px；
保证金：0自动；
}
.分区{
保证金：0自动；
宽度：155px；
高度：75px；
填充：8px；
边框：2个虚线#000；
}
#一个{
浮动：左；
边缘顶部：10px；
左缘：30%；
}
#两个{
浮动：对；
边缘顶部：10px；
保证金权利：30%；
}
#三{
浮动：左；
边缘顶部：30px；
左边距：15%；
}
#四{
浮动：对；
边缘顶部：30px；
右边距：15%；
}
#五{
浮动：左；
边缘顶部：30px；
左缘：5%；
明确：两者皆有；
}
#六{
浮动：对；
边缘顶部：30px；
保证金权利：5%；
}
#七{
浮动：左；
边缘顶部：30px；
左边距：15%；
明确：两者皆有；
}
#八{
浮动：对；
边缘顶部：30px；
右边距：15%；
}
#九{
浮动：左；
边缘顶部：30px；
左缘：30%；
}
#十{
浮动：对；
边缘顶部：30px；
保证金权利：30%；
}
#框1{
保证金：自动；
边缘顶部：30px；
宽度：300px；
高度：60px；
字体大小：30px；
文本对齐：居中；
}
#项目-1{
背景色：#ff0；
}

单击

在这里

您正在通过

id

值循环设置所有内容的样式。然后将新ID分配给

randomPhase（）

中的div，这会破坏布局。在

randomPhrase（）

中，不分配ID，而是分配类，然后通过类名设置黄色项的样式，这样基于ID的CSS布局仍然有效

/----计时器---->
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
element.innerHTML=“请等待”+secondsToHms（秒）+“秒”；
秒--；
var timer=setTimeout（'倒计时（'+secs+'，“'+elem+”），1000）；
如果（秒<1）{
清除超时（计时器）；
随机短语（）；
}
//----小时到分钟到秒---->
第二个职能部门（d）{
d=数量（d）；
var h=数学楼层（d/3600）；
var m=数学下限（d%3600/60）；
var s=数学下限（d%3600%60）；
返回（（h>0？h+）：“+（m<10？.0:”）：“）+m+”：“+（s<10？.0:”）+s）；
}
}
//-----随机选取------->
函数（短语）{
变量ID=[“1”、“2”、“3”、“4”、“5”、“6”、“7”、“8”、“9”、“10”]；
var divs=document.getElementsByClassName（“div”）；
而（divs.length>0）{
var i=Math.floor（Math.random（）*ids.length）；
divs[0].classList.add（'item-'+ids[i]）；
id.拼接（i，1）；
divs=[].slice.call（divs，1）；
}
}

html{
框大小：边框框；
}
*,
*：之前，
*：之后{
框大小：继承；
}
.集装箱{
宽度：860px；
保证金：0自动；
}
.分区{
保证金：0自动；
宽度：155px；
高度：75px；
填充：8px；
边框：2个虚线#000；
}
#一个{
浮动：左；
边缘顶部：10px；
左缘：30%；
}
#两个{
浮动：对；
边缘顶部：10px；
保证金权利：30%；
}
#三{
浮动：左；
边缘顶部：30px；
左边距：15%；
}
#四{
浮动：对；
边缘顶部：30px；
右边距：15%；
}
#五{
浮动：左；
边缘顶部：30px；
左缘：5%；
明确：两者皆有；
}
#六{
浮动：对；
边缘顶部：30px；
保证金权利：5%；
}
#七{
浮动：左；
边缘顶部：30px；
左边距：15%；
明确：两者皆有；
}
#八{
浮动：对；
边缘顶部：30px；
右边距：15%；
}
#九{
浮动：左；
边缘顶部：30px；
左缘：30%；
}
#十{
浮动：对；
边缘顶部：30px；
保证金权利：30%；
}
#框1{
保证金：自动；
边缘顶部：30px；
宽度：300px；
高度：60px；
字体大小：30px；
文本对齐：居中；
}
.项目-1{
背景色：#ff0；
}

单击

在这里

您正在通过

id

值循环设置所有内容的样式。然后将新ID分配给

randomPhase（）

中的div，这会破坏布局。在

randomPhrase（）

中，不分配ID，而是分配类，然后通过类名设置黄色项的样式，这样基于ID的CSS布局仍然有效

/----计时器---->
功能倒计时（秒、元素）{
var元素=document.getElementById（elem）；
element.innerHTML=“请等待”+secondsToHms（秒）+“秒”；
秒--；
var timer=setTimeout（'倒计时（'+secs+'，“'+elem+”），1000）；
如果（秒<1）{
清除超时（计时器）；
随机短语（）；
}
//----小时到分钟到秒----