問題タブ [css-multicolumn-layout]

CSS ハイフニングを使用して、たとえば 2 列、3 列、または 4 列に拡張された CSS 複数列レイアウトに流れ込むテキストの大きな段落があります。ある時点で、段落の残りの部分を 2 番目の列の先頭から開始できるようにするために、列のテキストの 1 つを早く終了する必要があります。

<column-break>次の列の先頭から残りのテキストを開始するようにa を設定する方法はありますか?

<br>現在、効果を達成するために、HTML で列を長くするために、列 (列区切りが必要) に多くの s を詰め込んでいます。

さらに、いずれかの列で何かが変更されるたびに、<br>スタッフィングの量が不足するため、再評価する必要があります。

私の JSFiddle を参照してください。

最初の列をエレガントに「終了」し、ブラウザーに次の列の残りのコンテンツを開始するように指示する方法はありますか?

画像は、CSSとプロパティを使用して、列内でcolumn-heightおよびにスケーリングできます。しかし、画像がタグ内に配置されている場合、機能しているように見えますが、失敗します^[1]。column-widthmax-widthmax-height<figure>max-widthmax-height

ここでこのフィドル^[2]でそれを示しました。例 4 は正しい動作を示しており、例 3 はさまざまなブラウザー間で矛盾して失敗します。適切な修正は何ですか？

^[1] Firefox では、overflow-y: scrollを含む全体で を作成しますdiv。Chrome Canary は、max-widthいくつかの列に分割された画像を拡大縮小して表示します。Safari 9 では、目的の結果が表示されます。

^[2]問題に関するコードの抜粋:

私はCSSベースの2列のレイアウトを持っています...

場合によっては、2 番目の列の上部が前の段落の下部からの余白をキャッチすることがあります。これにより、添付の写真に見られるように、次の段落の上部が押し下げられます。侵入、マージンの変更、インラインブロックを試しました。すべてがある程度の成功を収めていますが、最適ではありません。2 番目の列にアクセスしてその余白を削除できますか?

私は CSS 列を使用しています。

HTML:

CSS:

ただし、を使用する場合は、列の幅を変えたいと思いますcolumn-width。

それはまったく可能ですか？パーセンテージを使用する方法もないと思いますか？

ホバー時にサブメニューを表示し、ホバーしたアイテムの右側に飛び出すポップアップメニューのスタイルを設定しようとしています。私の主な項目は を使用して 2 つの列に分割されてcolumn-countおり、ここから不幸が始まります。

Firefox では、すべてが期待どおりに動作します。ホバーされたアイテムがある場所にサブメニューが表示されます。Chrome では、サブメニューは一番左の列を基準にしてポップアップします。

4 つのケース (ホバーされたアイテム 3 と 9、Firefox と Chrome) が添付の画面に示されています。Firefox と Chrome の両方でデモを試して、私の言いたいことを確認してください。

これに対するきちんとした解決策はありますか？column-span を試しましたが、うまくいきません。liポップアップを完全な高さにしたいので、アイテムの相対を作成できません。

http://jsfiddle.net/cfckw5jz/6/

列の左端と右端の余白を、それらの間のスペースと同じにしたいです。私のコードペンはそれをかなりうまく示していると思います。それがはっきりしない場合に備えて、

現在の状態とは対照的に、赤でラベル付けされた赤いギャップがすべて同じであることを望みます。

これが私がこれに基づいているコードです：

5 つの列に取り組んでいますが、内部の要素が壊れています。これを修正しようとしましたが、運がありません。

リンク: http://bit.ly/1NDAnQA

CSS:

HTML:

次のようなCSS3列を使用しています

私のhtmlは次のようになります。

Chrome 開発ツールで iPad と iPhone の表示を確認しましたが、問題なく動作しています。ただし、実際の iPad と iPhone には何も表示されません。どうすればこれを解決できますか?