問題タブ [column-count]

実際に私はこのプロジェクトに取り組んでいます: プロジェクトページ

これは Google Chrome です。 これは Firefox のバグのあるバージョンです。

IE11 と Chrome では、予想どおり、ほぼ同じように表示されます。問題は Firefox にあります。列数は、他のブラウザーのようには機能しません。私が間違っていることを理解できません。Web サイトは Bootstrap ベースです。ページの上部を生成するコードは次のとおりです。

CSSは次のとおりです。

}

必要に応じて、これは Wordpress によって生成された HTML です。

まず第一に、私はここでその質問を見つけましたが、答えは私のケースにはあまり適合しません。それがどういうわけか理にかなっていれば:-D

サイバーチンパンジーの「レスポンシブ」Wordpress テーマの子テーマを作成しています。

そのためには、テキストを 3 列に整形するだけでなく、サイトのバックエンドで編集できるようにする必要がありました。私はCCSでそれを管理しました：

これにより、最初の列が次の列よりも 5px 低く始まるという問題が発生します。理由がわかりません。

上記のように、他のスレッドの回答は機能しません。これは、2 列しか使用しないサブサイトもあるため、定義された幅を使用できないためです。テキストが入っている div の上/前には、常に別の div があります。

(PHP)テキストが入っているコンテナ:

PHP によって生成される (HTML) コンテナー:

画面:

状況のショット

マークされた問題のあるショット

次のコードを使用して、テキストを 2 番目の列にフローできるようにしています。文字の上部が最初の列の下部で切り取られ、文字の残りの部分が 2 列目の上部に表示されることを除いて、すべて問題ありません。

ページの左側にある [機能] タブをクリックし、[エンターテイメント] セクションを見て、私が話していることを確認してください。 http://www.dreamhomevacationrentals.com/hotels/spanish-modern-retreat/

どんな助けでも大歓迎です:)

ページに新聞のようなコラムを作成しようとしています。しかし、私のページにはテーブルが含まれており、IE、Chrome、Safari、および Opera では、テーブルが 2 つの異なる列に分割されています。これは私が望んでいる動作ではありません。テーブルがある場合は、完全に 1 つの列に収めたいと思います。ここにいくつかのコードがあります：

問題を確認してそれをいじる簡単な方法は、Chrome を使用してhttp://www.w3schools.com/css/tryit.asp?filename=trycss3_column-gapに移動し、私の例のコードに貼り付けることです。Firefox を試してみると、表が完全に左側の列に収まっていることがわかります。

1 行に 3 つの div/画像 (管理者には div があり、結果ページには画像があります) を配置したいのですが、8 つ以上またはそれ以下 (動的) があります。

column-count を使用しましたが、問題なく動作しましたが、いくつか問題があります。

1. 最初はサポートです。これを IE7 用に最適化する必要があります。
2. 2 つ目は、画像の表示方法です (左から右ではなく上から下)。
3. 3 つ目は、4、7、10、13、16 などの画像がある場合の問題です。

フロートは使いたくない。レスポンシブにする方法はありますか？基本的に、最大サイズが XXXpx の div で、ページのサイズを変更するときに他の行にドロップするのではなく、サイズを変更しますか?

http://jsfiddle.net/xabxt3re/1/

右側のサイズを変更できない場合があります。ページを閉じて、もう一度開いてください。動作するはずです。奇妙な JSFiddle の問題。また、そこをクリックすると、最後に新しい画像が追加されるので、回避したい動作を観察できます。

基本的に、1 行に 3 つの div/画像を配置して、ブラウザー ウィンドウの幅が十分でない場合にサイズを変更し、代わりに別の行にドロップする方法はありますか? または、列数が画像を表示する順序を修正し、最初の 2 つの列を 2 つの画像で埋めて、均等に広げない方法を教えてください。

追伸:誰かが私の質問に反対票を投じたら、少なくともその理由を教えていただけますか? それで、私はそれを改善して、次回のために学ぶことができますか? 本当に迷惑なので。私はすべての詳細と、私が持っているもののコードさえも提供しました.

編集の提案をありがとう。リンクの後にスペースを追加しましたが、1 つ作成するにはスペースを 2 つ追加する必要があるのを忘れていました....

column-list は、word-wrap ではなく、フィールドセットでうまく機能します。

テスト: http://jsfiddle.net/jbe07sbs/1/

Chrome 39.0.2171.71 m でテスト済み

関連: fieldset の column-count が Firefox で機能しない

さまざまな高さのブロックのリストがあります。

css column-count プロパティを使用して、それらを 3 列に流したい。ブロックを壊したくないので、column-break-inside: avoid を適用します。問題は、それが適用されると、列の高さの分割が非常に不均等になることです。

このコードペンhttp://codepen.io/KwiZ/pen/PwmXPBを参照してください。コンテナの固定高さを設定したときのように、高さ分割はより良いかもしれません: http://codepen.io/anon/pen/emWbmm、しかしもちろん固定高さは悪いので避けるべきです。なぜこれが起こるのか、列の高さを自然に等しくする方法は?