首先我正在使用Chrome ...如果您查看此First jsfiddle，下拉菜单就不会下降。
<div id="column1" style="float: left; width: 400px;">
如果我将宽度从400更改为900，那么它将正常工作，请参阅此Second jsfiddle。
<div id="column1" style="float: left; width: 900px;">
我不明白为什么CSS和HTML对我这样做。所以我正在寻找原因的解释。
答案 0 :(得分：1)
您使用的column-count会将div的内容划分为3列，并且该划分会导致“额外”内容在容器外“显示”（仅375px宽）。
900px（容器）解决这个问题的原因是它为<select>元素提供了足够的空间来渲染（顺便说一句 - 800px就足够了。）
答案 1 :(得分：1)
你在课堂上有这个css规则.topColorTile
column-count: 3;
column-gap: 10px;
如果将＃column1的宽度设置为400px，则将继承类.topColorTile。 你还将.topColorTile div.topColorCard的宽度设置为375px，这里错了，你不能设置子节点大于父/列数的宽度。
抱歉我的英文不好：D
答案 2 :(得分：1)
正如其他人已经回答的那样，您在''
.topColorTile但在column-count: 3;
column-gap: 10px;
div.topColorCard当父容器只有 width: 375px;
时，div会分解为3列。由于内部没有其他div（或元素），包含select的卡使用整个宽度（CSS中指定的400px），其余两列添加在它们旁边但没有内容（即不可见）
这使得select语句完全显示，但重叠（和不可见）'列'阻止click事件触发下拉操作。
将列数更改为1可以解决问题（或删除CSS规则，在这种情况下会相同）
将375px的宽度设置为较小的量（适合父级的400px）也可以这样做（即.topColorCard）
将父级的宽度设为更高的数字（如130px x 3 < 400px）也可以防止这种重叠。
答案 3 :(得分：-1)
<div style="display:inline; float:right;">
这就是为什么...... float:right
将其更改为float:left或调整div的宽度
你的代码很乱。查看FreeCodeCamp在线教程以提高您的技能。