HTML下拉不下降..为什么

首先，我使用的是Chrome ...如果你看看这个First jsfiddle，下拉不会下降。HTML下拉不下降..为什么

<div id="column1" style="float: left; width: 400px;">

如果我改变从400到900的宽度，然后它会正常工作看到这个Second jsfiddle。

<div id="column1" style="float: left; width: 900px;">

我不明白，为什么CSS和HTML这样做是为了我。所以我正在寻找解释原因。

“我不明白为什么CSS和HTML会这样对我” - :) :) :) ROTFLMAO – ochi

你提琴是什么问题？ –

我在看HTML，它看起来过于复杂 - 你想达到什么目的？可以简化吗？ – ochi

您使用的column-count会将div的内容分成3列，并且该部分会导致“额外”内容在您的容器外部（仅宽度为375px）“显示”。

（容器的）900px解决这个问题的原因是它为<select>元素渲染提供了足够的空间（btw - 800px就足够了）。

2016-12-30 02:17:09 Dekel

为什么select元素需要800多个px才能渲染？ –

你的'select'的宽度是〜120px，你设置的内容被分割为3列，这将是360px，添加375px的容器和（可能）其他填充/边距/边框，你应该得到到接近那个数字的东西。恕我直言，它看起来像一个铬中的错误。我没有看到浏览器行为如此的好理由。 – Dekel

我从来没有想过它是一个铬错误，但这曾经工作，我已经回到原来的承诺，它甚至不工作 –

-1

<div style="display:inline; float:right;">

这就是为什么... float:right

将其更改为float:left或调整的div的

你在你的代码弄得一塌糊涂宽度。检查FreeCodeCamp在线教程，以提高您的技能。

2016-12-30 01:52:43

感谢它的混乱，但我离题了，但我需要它正确地浮动，它并没有真正回答我的问题为什么 –

问题不是“如何解决”，而是“原因是什么”。 – Dekel

为什么？你有相同的类名复制div，anonymus div与内联样式，divs相互覆盖。清理代码！ –

你必须在课堂上这个CSS规则.topColorTile

column-count: 3; 
column-gap: 10px;

如果通过400像素设置＃COLUMN1的宽度，类.topColorTile将被继承。而且您还将.topColorTile div.topColorCard的宽度设置为375px，这里是错误的，您不能使用大于父/列宽度的子节点进行设置。

对不起我的英文不好：d

2016-12-30 02:22:44 Tri

正如其他人回答说，你有.topColorTile

column-count: 3; 
column-gap: 10px;

这个CSS规则

而且对div.topColorCard

width: 375px;

当这条规则父容器只有400px div分解成3列。由于里面没有其他div（或元素），包含select的卡使用整个宽度（在CSS中指定的375px），其余两列添加在它们旁边但没有内容（即不可见）

这使得select语句完全显示，但重叠（和不可见）'列'阻止click事件触发下拉操作。

改变的列数为1就解决了问题（或除去CSS规则，在这种情况下将是相同的）

的.topColorCard宽度设置为一个较小量（即将适合家长的400像素）也会这样做（即130px x 3 < 400px）

使父母的宽度更高（如900px）也可以防止这种重叠。

2016-12-30 02:51:09 ochi

回答