最初に私は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が私にこれを行い、なぜ私は理解していません。だから私は理由の説明を探しています。 float:leftへ
column-countを使用すると、divのコンテンツが3つの列に分割され、その分割によってコンテナーの外側に「余分な」コンテンツが表示されます（これは375pxのみです）。
900px（コンテナの）がこの問題を解決する理由は、<select>要素がレンダリングするのに十分なスペースがあるからです（btw-800pxで十分です）。
なぜselect要素はレンダリングするのに800ピクセル以上必要ですか？ –
あなたの 'select'の幅は〜120pxです。内容を3列に分割するように設定します.360px、コンテナの375px、他のパディング/マージン/ボーダーを追加します。その数に近いものに。 IMHOそれはクロムのバグのように見えます。私はブラウザがこれのように振る舞う良い理由は見当たりません。 – Dekel
私はそれがクロムバグだとは考えていませんでしたが、これはうまくいきました。私は元のコミットに戻りました。それはうまく動作しません。 –
<div style="display:inline; float:right;">
... float:right
変更してか、あなたがあなたのコードに大きな混乱を持っているのdivの
の幅を調整します。あなたのスキルを向上させるためにFreeCodeCampオンラインチュートリアルをチェックしてください。
理由がありましておかしくありがとうございます...しかし、私はそれを必要とします。浮かれて、それは本当にWHYの私の質問に答えることはありません –
質問は "どのように解決する"ではなく、 "原因は何か"ではなかった。 – Dekel
なぜですか？同じクラス名のdivを複製し、インラインスタイルのanonymus divとdivをカバーします。コードをクリーンアップ！ –
は、あなたが400ピクセルで＃のCOLUMN1の幅を設定した場合、クラス.topColorTileが継承されます.topColorTile
column-count: 3;
column-gap: 10px;
クラスで、このCSSルールを持っています。 また、.topColorTile div.topColorCardの幅を375pxで設定します。ここでは間違っていますが、子ノードのサイズをparent/column-countの幅より大きく設定することはできません。
私の悪い英語のため申し訳ありません：D
他の人が答えたように、あなたは.topColorTile
column-count: 3;
column-gap: 10px;
に、このCSSルールを持っているだけでなく、div.topColorCard
width: 375px;
にこのルールを持っています親コンテナは400pxのみで、divは3つの列に分解されます。内側に他のdiv（または要素）がないので、selectを含むカードは、残りの2つの列がその隣に追加されていて内容が表示されていない（つまり見えない）375px（375px）を使用します。これにより、selectステートメントが完全に表示されますが、オーバーラップ（および不可視）な列は、クリックイベントがドロップダウンアクションをトリガーするのを防ぎます。
1に列の数を変更すると、（同じになり、この場合、またはCSSルールを削除する）問題を解決するだろう
少ない量に.topColorCardの幅を設定する（つまり、親の400ピクセルに合います）もそれを行うだろう（すなわち130px x 3 < 400px）
（900pxのように）親の幅を大きくすると、この重なりが防止されます。
「CSSとHTMLがこれをなぜ私にしているのか分からない」 - :) :) :) ROTFLMAO – ochi
あなたは何が問題なの？ –
私はHTMLを見ていて、それは過度に複雑に思われます - あなたは何を達成しようとしていますか？それは単純化できますか？ – ochi